国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Community

Learn

Tools Library

AI Tools

Leisure

English

javascript - jquery 上傳前預(yù)覽

PHP中文網(wǎng) 2017-04-10 17:49:12

222

$(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]);
  }
 });
});

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

PHP中文網(wǎng)

認(rèn)證高級PHP講師

reply all(2)

小葫蘆2017-04-10 17:51:12 2 floor

可以用傳參的方法

<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');">

//定義數(shù)據(jù)關(guān)系
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 }
};

//預(yù)覽上傳圖片
//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('src', fileReader.result).show();
        picAll[pictureType].blob = file;
    };

    fileReader.readAsDataURL(file);

}

思路大概是這樣。。。

點(diǎn)擊查看代碼運(yùn)行及效果
截圖如下：