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();
    }
}
/**************多图上传结束*****************/
复制代码

 

运行效果:

 

 

posted @   pheosia  阅读(9746)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示