使用jQuery进行图像预览

我尝试用jQuery做多个输入图像预览.预览图像工作正常,但同一div中的图像预览,我需要在不同的div中的每个图像预览.我该怎么做？

HTML

   

     desktop:

          

      mobile:

          

     Submit
     

custom.js

$(document).ready(function() {
/*multiple image preview first input*/

    $("#files").on("change", handleFileSelect);

   selDiv = $("#selectedFiles");
   $("#myForm").on("submit", handleForm);

   $("body").on("click", ".selFile", removeFile);

   /*end image preview */

   /* Multiple image preview second input*/
   $("#mobile").on("change", handleFileSelect);

   selDivM = $("#selectFiles");
   $("#myForm").on("submit", handleForm);

   $("body").on("click", ".selFile", removeFile);

  /*end image preview*/
)}

Handle File Select的方法函数

var selDiv = "";
var selDivM="";
var storedFiles = [];

function handleFileSelect(e) {
   var files = e.target.files;
   var filesArr = Array.prototype.slice.call(files);
   filesArr.forEach(function(f) {

    if(!f.type.match("image.*")) {
        return;
    }
    storedFiles.push(f);

    var reader = new FileReader();
    reader.onload = function (e) {
     var html = "
" + f.name + "
";
        if ( typeof selDivM !== "") {
            selDivM.append(html);
        }else {
            selDiv.append(html);
        }

    }
    reader.readAsDataURL(f);
});

}

句柄形式的功能

function handleForm(e) {
e.preventDefault();
var data = new FormData();

for(var i=0, len=storedFiles.length; i

单击时删除文件的功能


function removeFile(e) {
   var file = $(this).data("file");
   for(var i=0;i

看代码笔片段



$(document).ready(function() {
    /*multiple image preview first input*/

    $("#files").on("change", handleFileSelect);

    selDiv = $("#selectedFiles");
    $("#myForm").on("submit", handleForm);

    $("body").on("click", ".selFile", removeFile);

    /*end image preview */

    /* Multiple image preview second input*/
    $("#mobile").on("change", handleFileSelect);

    selDivM = $("#selectFiles");
    $("#myForm").on("submit", handleForm);

    $("body").on("click", ".selFile", removeFile);
 });
    /*multiple image preview*/


var selDiv = "";
// var selDivM="";
var storedFiles = [];

function handleFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    filesArr.forEach(function(f) {

        if(!f.type.match("image.*")) {
            return;
        }
        storedFiles.push(f);

        var reader = new FileReader();
        reader.onload = function (e) {
            var html = "
" + f.name + "
";
             selDivM.append(html);
          }
        reader.readAsDataURL(f);
    });

}

function handleForm(e) {
    e.preventDefault();
    var data = new FormData();

    for(var i=0, len=storedFiles.length; i
#selectedFiles img {
            max-width: 200px;
            max-height: 200px;
            float: left;
            margin-bottom:10px;
        }
        #userActions input{
            width: auto;
            margin: auto;
        }
        #selectFiles img {
            max-width: 200px;
            max-height: 200px;
            float: left;
            margin-bottom:10px;
        }



  
   

     desktop:

          

      mobile:

          

     Submit