blocks|key|96597|text|井。您需要实现文件上传功能。如果是的话，可以使用http://www.uploadify.com/，然后使用onUploadSuccess方法来更改图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|96598|你说离线的时候？你的意思是没有互联网连接，还是网页会像内联网一样存在于服务器上？|96599|............Just补充我自己的答案.|96600|好吧，所以你需要它放在USB上。为什么不在USB上安装一个独立的服务器，这样你就可以运行PHP了。|96601|http://www.server2go-web.de/index.html|96602|http://www.uwamp.com/en/|96603|$("#file_upload").uploadify({
++++++++++++height++++++++:+30,
++++++++++++width+++++++++:+120,
++++++++++++swf+++++++++++:+'include/fileuploader/uploadify.swf',
++++++++++++uploader++++++:+'include/fileuploader/uploadify.php',
++++++++++++'onUploadSuccess'+:+function(file,+data,+response)+{
++++++++++++++++console.log('The+file+was+saved+to:+'+%2B+data);
++++++++++++++++$("#img-preview").html("<img+src='"%2Bdata%2B"'+/>");

++++++++++++}
});|code-block|syntax|javascript|96604|entityMap|0|LINK|mutability|MUTABLE|url|http://www.uploadify.com/|1|2^0|O|P|0|0|0|0|0|0|12|1|0|0|O|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|L|3|M|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|N|3|O|5|P|7|1H|8|@]|9|@]|C|$Q|R]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|K]]|11|$5|V|W|X|C|$Y|M]]]]

<p>Well. you will need to implement file upload functionaility.
you could uses <a href="http://www.uploadify.com/" rel="nofollow">http://www.uploadify.com/</a>
if so then you would use the onUploadSuccess method, to change the image.</p>

<p>when you say offline? do u mean no internet connection, or will the webpage live on a server like a intranet?</p>

<p>............Just to add to my own answer ........</p>

<p>OK, So you need it on a USB. why not install a standalone Server on the USB that way you can run PHP.</p>

<p><a href="http://www.server2go-web.de/index.html" rel="nofollow">http://www.server2go-web.de/index.html</a></p>

<p><a href="http://www.uwamp.com/en/" rel="nofollow">http://www.uwamp.com/en/</a></p>

<pre><code>$("#file_upload").uploadify({
            height        : 30,
            width         : 120,
            swf           : 'include/fileuploader/uploadify.swf',
            uploader      : 'include/fileuploader/uploadify.php',
            'onUploadSuccess' : function(file, data, response) {
                console.log('The file was saved to: ' + data);
                $("#img-preview").html("&lt;img src='"+data+"' /&gt;");

            }
});
</code></pre>


blocks|key|1768839|text|您可以使用下面的javascript来执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1768840|<script>

++function+changeImage(newimage)
+++{
++++image+=+document.getElementById('oldimage');
++++image.src+=+newimage;
+++}

</script>|code-block|syntax|javascript|1768841|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can use the below javascript to do this:</p>

<pre><code>&lt;script&gt;

  function changeImage(newimage)
   {
    image = document.getElementById('oldimage');
    image.src = newimage;
   }

&lt;/script&gt;
</code></pre>


blocks|key|1768871|text|This+(readAsDataURL)是你要找的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1768872|参见工作示例here|1768873|在所附的示例中，您还可以发送所选图像的base64数据以供上载。|1768874|这里的主题是:大多数客户都在寻找一个移动网络应用程序，一个应用程序，从电话拍摄照片，并发送到服务器。在网络应用程序中并不完全可行。|1768875|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/FileReader#readAsDataURL%2528%2529|1|https://mdn.mozillademos.org/files/3698/image_upload_preview.html^0|0|K|0|0|6|4|1|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p><a href="https://developer.mozilla.org/en/DOM/FileReader#readAsDataURL%28%29" rel="nofollow"><strong>This (readAsDataURL)</strong></a> is what you are looking for.</p>

<p>See working example <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html" rel="nofollow"><strong>here</strong></a></p>

<p>In the example attached, you can send the base64 data of your selected image for uploading also. </p>

<p>OUT OF TOPIC HERE: Most of the client are looking for a mobile web app, an app to take picture from phone and send to the server. Not entirely feasible in web apps.</p>


blocks|key|97551|text|我想我应该展示一个代码示例，因为这是StackOverflow的思想。我希望它能说明这件事是如何运作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|97552|与其依赖一组插件和库，您将发现使用本机javascript可能更容易。您可以将jQuery添加到混合的事件处理中，等等，如果您愿意的话，它在web工具包中基本上是标准的。|97553|HTML|97554|首先，让我们为input和占位符img元素添加html。当然，您可以使用img或本机js动态添加jQuery文件。|offset|length|style|CODE|97555|<input+id='ourfile'+type='file'+/>


<img+id='preview'+src=''+/>++++|code-block|syntax|javascript|97556|Javascript|97557|//+Lets+cache+our+two+elements+of+interest.
ourfile+=+document.getElementById('ourfile');
preview+=+document.getElementById('preview');

//+Create+an+instance+of+the+'native'+FileReader.
fr+=+new+FileReader();

//+When+our+input+triggers+change+(i.e.+image+is+selected)+load+the+file+using+the+file+reader.
ourfile.onchange+=+function+()+{
++++file+=+ourfile.files[0];
++++fr.readAsDataURL(file);
}

//+Bind+to+the+`onload`+event+of+our+FileReader+and+set+the+src+of+the+image+to+the+result+(base64+of+the+image).
fr.onload+=+function(){
+preview.src+=+fr.result;+++
}|97558|详细信息|97559|@Akki619的答案中的链接显示了检查图像有效性的详细信息，等等。|97560|小提琴|97561|下面是指向一个工作示例的链接：http://jsfiddle.net/rUvUX/4/|97562|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rUvUX/4/^0|0|0|0|7|5|G|3|10|3|0|0|0|0|0|0|0|F|S|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1D|8|@$H|1E|I|1F|J|K]|$H|1G|I|1H|J|K]|$H|1I|I|1J|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1M|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@$H|1R|I|1S|1|1T]]|A|$]]|$1|12|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<p>I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.</p>

<p>Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.</p>

<h1>HTML</h1>

<p>First lets add the html for the <code>input</code> and a placeholder <code>img</code> element. You could of course dynamically add the <code>img</code> file with jQuery or native js.</p>

<pre><code>&lt;input id='ourfile' type='file' /&gt;

&lt;!-- The image placeholder for our preview --&gt;
&lt;img id='preview' src='' /&gt;    
</code></pre>

<h1>Javascript</h1>

<pre><code>// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');

// Create an instance of the 'native' FileReader.
fr = new FileReader();

// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
    file = ourfile.files[0];
    fr.readAsDataURL(file);
}

// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
 preview.src = fr.result;   
}
</code></pre>

<h1>Details</h1>

<p>The link in @Akki619's answer shows about details for checking validity of the image, etc.</p>

<h1>Fiddle</h1>

<p>Here is a link to a working example:
<a href="http://jsfiddle.net/rUvUX/4/" rel="nofollow">http://jsfiddle.net/rUvUX/4/</a></p>


<p>I'm very new to coding on the web and I'm trying to make something work.</p>

<p>I'm trying to make a little webpage with an easy function to replace an existing image on the page with an image that the users chooses from his own computer. All of this is expected to be done offline. I have however, no idea how..</p>

<p>How do I tackle this?</p>

<p>p.s. With offline I mean, I am expected that this can be done locally without uploading to a server or anything. I am supposed to put this little page on a usb stick so it can be used as a little tool.</p>


Replace image with javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我对网络上的编码非常陌生，我正在努力使一些东西发挥作用。我试图用一个简单的功能制作一个小网页，用用户从自己的电脑中选择的图像替换页面上现有的图像。所有这些都是脱机完成的。但是我不知道怎么..。我该怎么处理这个？附注：对于脱机，我的意思是，我可以在本地完成这一点，而不需要上传到服务器或其他任何东西。我应该把这个小页面放在...

问用javascript替换图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用javascript替换图像EN