我对网络上的编码非常陌生,我正在努力使一些东西发挥作用。
我试图用一个简单的功能制作一个小网页,用用户从自己的电脑中选择的图像替换页面上现有的图像。所有这些都是脱机完成的。但是我不知道怎么..。
我该怎么处理这个?
附注:对于脱机,我的意思是,我可以在本地完成这一点,而不需要上传到服务器或其他任何东西。我应该把这个小页面放在usb手柄上,这样就可以作为一个小工具使用。
发布于 2013-08-20 10:17:11
This (readAsDataURL)是你要找的东西。
参见工作示例here
在所附的示例中,您还可以发送所选图像的base64数据以供上载。
这里的主题是:大多数客户都在寻找一个移动网络应用程序,一个应用程序,从电话拍摄照片,并发送到服务器。在网络应用程序中并不完全可行。
发布于 2013-08-20 09:57:06
井。您需要实现文件上传功能。如果是的话,可以使用http://www.uploadify.com/,然后使用onUploadSuccess方法来更改图像。
你说离线的时候?你的意思是没有互联网连接,还是网页会像内联网一样存在于服务器上?
............Just补充我自己的答案.
好吧,所以你需要它放在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-20 12:30:54
我想我应该展示一个代码示例,因为这是StackOverflow的思想。我希望它能说明这件事是如何运作的。
与其依赖一组插件和库,您将发现使用本机javascript可能更容易。您可以将jQuery添加到混合的事件处理中,等等,如果您愿意的话,它在web工具包中基本上是标准的。
HTML
首先,让我们为input和占位符img元素添加html。当然,您可以使用img或本机js动态添加jQuery文件。
<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/
https://stackoverflow.com/questions/18331995
复制相似问题