H5圖片上傳，文件流方式以及base64方式

圖片上傳的兩種方式：

css樣式：

 /*圖片上傳*/
        .item { width: 250px; height: 150px; position: relative; border: 1px solid #ccc; box-sizing: border-box; }
        .item .addImg { position: absolute; z-index: 2; cursor: pointer; top:0; left: 0; width:100%; height:100%;}
        .item .addImg img { position: absolute; left: 50%; top: 50%; margin-top: -15px; margin-left: -20px; }
        .item input { display: none; }
        .item .preBlock { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display:none;}
        .item .preBlock img { height: 100%; width: 100%; }
        .item .preBlock img[src=""] { display:none; }
        .item .delete { position: absolute; right: 1px; top: 1px; width: 46px; height: 32px; padding: 7px 14px; background: rgba(0,0,0,.5); cursor: pointer; display: none; z-index: 100; line-height: 1; box-sizing: border-box; }
        .item .delete img { height: 100%; width: 100%; }
        .item .mxvalidate-errorDiv{ position:absolute; width:250px; left:260px; top:65px;
        }

 

HTML代碼：

<div class="item">
      <div class="addImg" onclick="clickImg(this)">
            <img src="../images/photo.png">
      </div>
      <input name="BUSINESSLICENCE" id="BUSINESSLICENCE" type="file" class="upload_input" onchange="getChangeImg(this)">
      <div class="preBlock">
            <img class="preview" id="BUSINESSLICENCEIMG" alt="" name="pic" src="">
     </div>
      <div class="delete" onclick="deleteImg(this)">
            <img src="../images/delete.png">
      </div>
</div>

 

方式一：文件流方式

//圖片上傳
//點擊
var clickImg = function (obj) {
    $(obj).parent().find('.upload_input').click();
    //$('#BUSINESSLICENCE').trigger('click');
};
//刪除
var deleteImg = function (obj) {
　　//$(obj).parent().find('input').val('');  //IE10下無效

　　//用這種方式可以將file文件的input的value值為空，IE10有效
    var id=$(obj).parent().find('input').attr("id");  
    var fileValue = document.getElementById(id);
    if (fileValue.outerHTML) {  //IE重置表單不能清空file值的方法
        fileValue.outerHTML = fileValue.outerHTML;
    }


    $(obj).parent().find('img.preview').attr("src", "");
    //IE9以下
    $(obj).parent().find('img.preview').css("filter", "");
    $(obj).hide();
    $(obj).parent().find('.addImg').show();
    $(obj).parent().find('.preBlock').hide();
};

//選擇圖片
function getChangeImg(myImgFile) {
    console.log(myImgFile);
    //預覽
    //添加按鈕
    var addImg = $(myImgFile).parent().find(".addImg");
    //刪除按鈕
    var deleteImg = $(myImgFile).parent().find(".delete");
    var curImg = $(myImgFile).parent().find(".preBlock");

    var ext = myImgFile.value.substring(myImgFile.value.lastIndexOf(".") + 1).toLowerCase();

    // gif在IE瀏覽器暫時無法顯示
    if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
        if (ext != '') {
            alert("圖片的格式必須為png或者jpg或者jpeg格式！");
        }
        return;
    }

    var myFile0 = myImgFile.files[0];

　　//需要用formData的方式提交數據，才可以進后台解析的數據的方法
    var formData = new FormData();
    formData.append('file', myFile0);  //添加圖片信息的參數
    //formData.append('sizeid', 123);  
   
　　 $.ajax({
        url: '/UploadFile/UploadifyFile',
        data: formData,
        type: 'post',
        processData: false, // 告訴jQuery不要去處理發送的數據
        contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
        success: function (d) {
            console.log(JSON.stringify(d));
           
            var pic = $(myImgFile).parent().find(".preview");
            pic.attr("src", d);
            addImg.hide();
            curImg.show();
            deleteImg.show();
        }
    });
}

方式二：base64二進制流的方式

//點擊
var clickImg = function(obj){
    $(obj).parent().find('.upload_input').click();
};
//刪除
var deleteImg = function(obj){
    $(obj).parent().find('input').val('');
    $(obj).parent().find('img.preview').attr("src","");
    //IE9以下
    $(obj).parent().find('img.preview').css("filter","");
    $(obj).hide();
    $(obj).parent().find('.addImg').show();
};
//選擇圖片
function change(file) {
    //預覽
    var pic = $(file).parent().find(".preview");
    //添加按鈕
    var addImg = $(file).parent().find(".addImg");
    //刪除按鈕
    var deleteImg = $(file).parent().find(".delete");

    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

    // gif在IE瀏覽器暫時無法顯示
    if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
        if (ext != '') {
            alert("圖片的格式必須為png或者jpg或者jpeg格式！");
        }
        return;
    }
    //判斷IE版本
    var isIE = navigator.userAgent.match(/MSIE/)!= null,
        isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
    isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null;
    if(isIE && !isIE10) {
        file.select();
        var reallocalpath = document.selection.createRange().text;
        // IE6瀏覽器設置img的src為本地路徑可以直接顯示圖片
        if (isIE6) {
            pic.attr("src",reallocalpath);
        }else{
            // 非IE6版本的IE由於安全問題直接設置img的src無法顯示本地圖片，但是可以通過濾鏡來實現
            pic.css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")");
            // 設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片
            pic.attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
        }
        addImg.hide();
        deleteImg.show();
    }else {
        html5Reader(file,pic,addImg,deleteImg);
    }
}
//H5渲染
function html5Reader(file,pic,addImg,deleteImg){
    var file = file.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){  //讀取完本地圖片后進行執行代碼
        //console.log("onload的結果"+this.result);

        var base64 = e.target.result;   //已經將圖片轉換為base64的二進制流


        pic.onload=function(e){
            console.log("pic的onload事件是否這行"+base64);

            $.ajax({
                url: '/UploadFile/UploadifyFile',  //后台方法
                data: base64,
                type: 'post',
                processData: false, // 告訴jQuery不要去處理發送的數據
                contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
                success: function (d) {
                    //上傳成功后，返回服務器上的jpg地址，再進行保存時，保存改地址即可。
                }
            });

        };

        pic.attr("src",this.result);   //給pic即img里面賦值; 
        //alert("讀取完本地圖片");


    };
    addImg.hide();
    deleteImg.show();
}

 

效果圖：

運行前：       運行后：

 

 

 

多張圖片上傳的方式：

html代碼：

 

<div class="itemMulti">
     <div class="addImg" onclick="clickImgMulti(this)">
            <img src="../images/photo.png">
     </div>
     <input name="CERTIFICATIONLICENCE" id="CERTIFICATIONLICENCE" type="file" class="upload_input" onchange="getChangeImgMulti(this)" multiple>
</div>

 

 

css樣式：

/*多圖上傳*/
.itemMulti{ overflow:hidden; }
.itemMulti .preBlock { float: left; border:1px solid #ccc; background: red; width: 90px; height: 90px; margin-right:10px; position:relative;margin:5px 10px 5px 0;}
.itemMulti .preBlock img { width:100%; height:100%;}
.itemMulti .preBlock .delete { position:absolute; right:0; top:0; background:rgba(0,0,0,.5); text-align:center; width:30px; line-height:1; padding:4px 0;}
.itemMulti .preBlock .delete img{ height:14px; vertical-align:unset; width:auto; line-height:1;}
.itemMulti .upload_input { display: none; }
.itemMulti .addImg { float: left; border: 1px solid #ccc; width: 90px; height: 90px; margin-right: 10px; position: relative; margin: 5px 10px 5px 0;  text-align:center; line-height:88px; }
.itemMulti .addImg:hover{ cursor:pointer;}
.itemMulti .addImg img { width: 30px; }

 

 

js代碼：

/**************多圖上傳開始*****************/
var imgCount;
//點擊添加按鈕
function clickImgMulti(obj) {
    $(obj).parent().find('.upload_input').click();
}

//input改變事件
function getChangeImgMulti(myImgFile) {
    //alert("imgCount" + imgCount);
    var thisParent = $(myImgFile).parent();
    var myFile = myImgFile.files;
    //預覽
    //添加按鈕
    var addImg = thisParent.find(".addImg");
    //刪除按鈕
    var deleteImg = thisParent.find(".delete");
    //預覽圖片
    var curImg = thisParent.find(".preBlock");
    var count = thisParent.find(".preBlock").length;  //文件一開始的個數
    //對多張圖片進行循環處理
    $.each(myFile, function (i, o) {
        var nameUrl = o.name;
        var ext = nameUrl.substring(nameUrl.lastIndexOf(".") + 1).toLowerCase();

        // gif在IE瀏覽器暫時無法顯示
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
            if (ext != '') {
                alert("圖片的格式必須為png或者jpg或者jpeg格式！");
            }
            return;
        } else {
            //剔除所有非圖片文件
            //var myFile0 = myImgFile.files[0];
            if (count < 20) {
                count = count + 1;
                if (count == 20) {   //為20必須隱藏添加按鈕，否則不隱藏添加按鈕
                    addImg.hide();
                }
                var formData = new FormData();
                formData.append('file', o);  //添加圖片信息的參數

                $.ajax({
                    url: '/UploadFile/UploadifyFile',
                    data: formData,
                    type: 'post',
                    processData: false, // 告訴jQuery不要去處理發送的數據
                    contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
                    success: function (d) {

                        var html = '<div class="preBlock"><img class="preview BUSINESSLICENCEIMG" alt="" name="pic" src="' + d + '"><div class="delete" onclick="deleteImgMulti(this)"><img src="../images/delete.png"></div></div>';

                        thisParent.prepend(html);
                    }
                });

            } else {
                alert("上傳數量不能大於20張");
                return;
            }

        }
    })

}

//刪除事件
function deleteImgMulti(obj) {
    var thisParent = $(obj).parents(".itemMulti");
    var imgCount = thisParent.find(".preBlock").length;

    $(obj).parent().remove();

    if (imgCount == 20) {
        thisParent.find(".addImg").show();
    }
}
/**************多圖上傳結束*****************/

 

運行效果：