Html jQuery 移动选择图像供以后上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15181109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile select image for later upload
提问by Rasmus Christensen
I'm building a small mobile web application using JQuery Mobile. Now I want to select an image on the phone and get information about it so I can upload it later from the app. Is this at all possible?
我正在使用JQuery Mobile构建一个小型移动 Web 应用程序。现在我想在手机上选择一张图片并获取有关它的信息，以便我以后可以从应用程序上传它。这是可能吗？
I might be in an offline situation and should still be able to select a image I want to upload.
我可能处于离线状态，应该仍然可以选择我要上传的图像。
回答by peterm
If your target phone's browser supports file upload input typeand FileAPI(e.g. iOS 6.0 Safari)
如果目标手机的浏览器支持文件上传输入类型和FileAPI（例如iOS 6.0 Safari）
<input type="file" name="image" accept="image/*" capture>
then you can let your user pick an existing file, or even use camera to take a shot, and read some attributes of an image file (file name, size, type, modification date).
然后你可以让你的用户选择一个现有的文件，甚至使用相机拍摄，并读取图像文件的一些属性（文件名、大小、类型、修改日期）。
$("input[type=file]").change(function(){
var file = $("input[type=file]")[0].files[0];
alert(file.name + "\n" +
file.type + "\n" +
file.size + "\n" +
file.lastModifiedDate);
});
You can also make a preview of a chosen file using FileReader.
您还可以使用 预览所选文件FileReader。
<div id="preview"></div>
displayAsImage3(file, "preview");
function displayAsImage3(file, containerid) {
if (typeof FileReader !== "undefined") {
var container = document.getElementById(containerid),
img = document.createElement("img"),
reader;
container.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
}
Here is working jsFiddle
这是工作jsFiddle
