Javascript 如何在 div 中提交表单之前使用 jquery 显示上传图像预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10818120/
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
How to show upload image preview using jquery before form submit in a div
提问by swapnesh
I am dealing with a form that contains various form elements with an option to upload multiple images(upto 6 max). Now i am having a div previewon clicking that div i fetch all form fields using jquery (form still not submitted at this time as its a multi form step1, 2 and 3). Now the problem is that i am fetching all form data with this code -
我正在处理一个包含各种表单元素的表单，可以选择上传多个图像（最多 6 个）。现在我有一个 divpreview单击该 div 我使用 jquery 获取所有表单字段（此时表单仍未提交，因为它是一个多表单步骤 1、2 和 3）。现在的问题是我正在使用此代码获取所有表单数据 -
var allFormData = $("#myform").serializeArray();
Using this another code i am able to show rest of the data in div, but image is not coming.
使用这个另一个代码，我可以在 div 中显示其余数据，但图像没有出现。
$.each(adtitletoshow, function(i, field){
if( field.name == 'desc'){
$(".add_desc").text(field.value);
}
});
This is the filed created by JS to upload image.
这是JS创建的上传图片的文件。
<script type="text/javascript">
var total_images = 1 ;
function add_file_field () {
total_images++ ;
if ( total_images > 6 ) return ;
var str_to_embed = '<input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"><br>' ;
$("#image_stack").append ( str_to_embed ) ;
}
</script>
All things going on single page so i need a solution that how can i load images under my preview div. Let me know if thr is some point of ambiguity still persists.
所有事情都在一个页面上进行，所以我需要一个解决方案，如何在我的预览 div 下加载图像。让我知道 thr 是否仍然存在一些歧义。
回答by Jahnold
You need to loop through the files array from the multiple input and use the FileReader API on each.
您需要从多个输入循环遍历文件数组，并在每个输入上使用 FileReader API。
I've set up the HTML like this:
我已经设置了这样的 HTML：
?<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>??????????????????????
Then the javascript as follows:
然后javascript如下：
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
$(image).appendTo('#images');
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$('#go').click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
I've set up a JSFiddle to demo http://jsfiddle.net/3LB72/
我已经设置了一个 JSFiddle 来演示http://jsfiddle.net/3LB72/
You'll probably want to do more checks on whether the browser the user is using has FileReader and if the files they have chosen are image files.
您可能希望对用户使用的浏览器是否具有 FileReader 以及他们选择的文件是否为图像文件进行更多检查。
回答by Anna Gabrielyan
This is much better, without clicking any button :D
这好多了，无需单击任何按钮：D
HTML:
HTML：
<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>
JavaScript:
JavaScript：
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
$("#images").css({'background-image':'url('+e.target.result+')'});
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$('#files').live('change', function(){
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
