[英]View image selected from file-system on client-side before upload?
I have an input tag on a form for selecting images to upload. 我在表单上有一个输入标签,用于选择要上传的图像。
<div id="lowresDemo">
<img src="some-url" />
</div>
<input type="file" id="FileToUpload" name="FileToUpload" />
I've attempted to change the a thumbnail displayed on the form next to the input to affirm to the user that their selection was the intended with the following jquery code: 我试图更改输入旁边的表单上显示的缩略图,以向用户确认他们的选择是使用以下jquery代码进行的:
$('#FileToUpload').change(function () {
$('#lowresDemo img').attr('src', $(this).val());
});
...this doesn't work in any browser, for browser security reasons I beleieve (as I remember from the last time I did something like this years ago). ...这在任何浏览器中都不起作用,出于浏览器安全原因,我认为(我记得上次我做过像年前这样的事情)。
QUESTION : 问题 :
Is there a way to present the user's choice of image before they submit the form -- and not just the filepath+name of the value in the input field, but a thumbnail showing the file they've selected? 有没有办法在提交表单之前显示用户的图像选择 - 而不仅仅是输入字段中值的文件路径+名称,而是显示他们选择的文件的缩略图?
Or does modern browser security prevent this? 或现代浏览器安全防止这种情况?
It's possible with the File API (IE does not support the File API) 使用File API(IE不支持File API)是可能的
<input type="file">
<script type="text/javascript">
$(document).ready(function() {
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
});
</script>
Working example: http://jsfiddle.net/ugPDx/ 工作示例: http : //jsfiddle.net/ugPDx/
There is no way to perform the operation before uploading the picture. 上传图片之前无法执行操作。
But think of it in a different way - the user "doesn' care" if the picture is already uploaded - you could show the thumbnail after they've uploaded, and show a confirm checkbox. 但是以不同的方式考虑它 - 如果图片已经上传,用户“不关心” - 您可以在上传后显示缩略图,并显示确认复选框。 Gmail does this with their email attachments - as soon as you selected the file to attach, the upload starts.
Gmail通过电子邮件附件执行此操作 - 只要您选择要附加的文件,就会启动上传。 But the user always has the option to uncheck the file, and it won't be included in the email.
但是用户始终可以选择取消选中该文件,并且它不会包含在电子邮件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.