HTML

Question

我对网络编码非常陌生，而且我正努力使某些工作成功。

我正在尝试创建一个具有简单功能的小网页，用一个用户从他自己的计算机中选择的图像替换页面上的现有图像。所有这些都预计将在线下完成。但是，我不知道如何......

我该如何解决这个问题？

P.S。离线我的意思是，我希望这可以在本地完成，而无需上传到服务器或任何东西。我应该把这个小页放在一个usb棒上，这样它就可以用作一个小工具了。

Answer 1

好。您需要实现文件上传功能。你可以使用http://www.uploadify.com/ 如果是这样，那么你将使用onUploadSuccess方法来改变图像。

当你说离线？你的意思是没有互联网连接，或者网页是否会像内联网这样的服务器上运行？

............只是添加到我自己的答案........

好的，所以你需要在USB上使用它。为什么不在USB上安装独立服务器，以便运行PHP。

http://www.server2go-web.de/index.html

http://www.uwamp.com/en/

$("#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("<img src='"+data+"' />");

            }
});

Answer 2

我认为我会展示一个代码示例，因为这是StackOverflow的想法。我希望它能说明这件事是如何运作的。

您不会依赖于一组插件和库，而是会发现使用本机javascript可能更容易。如果需要，可以将jQuery添加到混合中以进行事件处理等，无论如何它都是web-dev工具包中的标准。

HTML

首先，我们添加input的html和占位符img元素。您当然可以使用jQuery或native js动态添加img文件。

<input id='ourfile' type='file' />

<!-- The image placeholder for our preview -->
<img id='preview' src='' />

的Javascript

// 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;   
}

详细

@ Akki619的答案中的链接显示了检查图像有效性的详细信息等。

小提琴

以下是工作示例的链接： http://jsfiddle.net/rUvUX/4/

Answer 3

This (readAsDataURL)正是您要找的。

参见工作示例here

在附带的示例中，您还可以发送所选图像的base64数据以进行上传。

在这里没有主题：大多数客户正在寻找一个移动网络应用程序，一个从手机拍照并发送到服务器的应用程序。在网络应用程序中并不完全可行。

Answer 4

您可以使用以下javascript执行此操作：

<script>

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

</script>

用javascript替换图像

4 个答案:

HTML

的Javascript

详细

小提琴