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(); } } /**************多图上传结束*****************/
运行效果: