我正在尝试使用用户在上传字段中选择的图像,然后才真正上传服务器端。具体来说,我想让用户在实际上传之前用一些jquery插件操作图像(裁剪,闪电等)。
我对JS没有那么多经验,所以到目前为止我最终得到了这段代码:
$(".image_upload_form").submit(function (e) {
"use strict";
e.preventDefault();
var input, files, reader;
input = $("#id_image");
files = input[0].files;
if (files && files[0]) {
reader = new FileReader();
reader.onload = function (e) {
$('#img_view').attr('src', e.target.result);
};
reader.readAsDataURL(files[0]);
}
});
工作正常,图像在提交表单后显示在"#img_view"
上。但我需要将"e.target.result"
函数中的reader.onload
变为变量,因此我可以在以后的代码中使用它。我怎么能这样做?
答案 0 :(得分:2)
如果您正在考虑IE,这将适用于所有浏览器,几乎在每个主浏览器上
function selectedPhotoText(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview')
.attr('src', e.target.result)
.width(240)
.height(149);
};
reader.readAsDataURL(input.files[0]);
}
else {
$('#imagePreview').attr('src', "../../Images/blqblq.jpg");
}
}
<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>