jquery 上傳前預覽

Question

$(function(){
 $("#id").change(function(){
  if (this.files && this.files[0]) {
   var reader = new FileReader();
   
   reader.onload = function (e) {
    $('#pre').attr('src', e.target.result);
   }
   reader.readAsDataURL(this.files[0]);
  }
 });
});

以上我可以讓圖片能夠預覽這沒問題
但是當我有四個不同的上傳前預覽的表單時
這好像就會有問題..就是選擇好圖片後 img src不會改變
有把id和pre都改成不一樣的
但還是有問題
不會帶入路徑到img src
請問若有四個表單需要這個code
如何區隔開來？

Answer 1

可以用传参的方法

<img style="width:110px; height:110px;" id="picture_1" src="" alt="form1">
<input type="file" onchange="uploadPicturePre(this,'form1');">

<img style="width:110px; height:110px;" id="picture_2" src="" alt="form2">
<input type="file" onchange="uploadPicturePre(this,'form2');">

//定义数据关系
var picAll = {
    form1: { id: '#picture_1', type: 'form1', blob: null },
    form2: { id: '#picture_2', type: 'form2', blob: null },
    form3: { id: '#picture_3', type: 'form3', blob: null },
    form4: { id: '#picture_4', type: 'form4', blob: null }
};

//预览上传图片
//pictureType的值为form1、form2等
function uploadPicturePre(item, pictureType) {
    $(picAll[pictureType].id).attr('src', '').hide();
    picAll[pictureType].blob = null;

    var me = item;

    if (!me.files || !(new FileReader())) {
        $(me).val('').get(0).parentNode.nextSibling.value = '';
        alert('您的浏览器不支持files或FileReader对象');
        return false;
    }

    if (me.files.length <= 0) {
        $(me).val('').get(0).parentNode.nextSibling.value = '';
        alert('您未选择文件');
        return false;
    }

    var file = me.files[0];

    if (!IsValidFileExtention(me.value, ["jpeg", "jpg", "png"])) {
        $(me).val('').get(0).parentNode.nextSibling.value = '';
        alert("文件格式不正确!");
        return false;
    }

    var fileReader = new FileReader();
    fileReader.onload = function () {
        $(picAll[pictureType].id).attr('src', fileReader.result).show();
        $(picAll[pictureType].id).attr('data-original', fileReader.result).show();
        picAll[pictureType].blob = file;
    };

    fileReader.readAsDataURL(file);

}

思路大概是这样。。。

点击查看代码 运行及效果
截图如下：

Answer 2

你这边获取的是第一个上传的文件，监听ipnut的变化，遍及下过去的值，就可以了。