2

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

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..

How do I tackle this?

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.

4

4 回答 4

4

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

当你说离线？你的意思是没有互联网连接，还是网页会像 Intranet 这样的服务器上存在？

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

好的，所以你需要它在 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+"' />");

            }
});
于 2013-08-20T09:57:06.383 回答
2

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

与其依赖一组插件和库，您会发现使用原生 javascript 可能更容易。如果需要，您可以将 jQuery 添加到事件处理等组合中，无论如何，它在 web-dev 工具包中几乎是标准的。

HTML

首先让我们添加 htmlinput和占位符img元素。img您当然可以使用 jQuery 或本机 js动态添加文件。

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

于 2013-08-20T12:30:54.073 回答
1

这 (readAsDataURL)是您正在寻找的。

请参阅此处的工作示例

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

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

于 2013-08-20T10:17:11.230 回答
0

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

<script>

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

</script>
于 2013-08-20T10:01:05.423 回答