javascript图片预览和上传（兼容IE）
本文实例为大家分享了js图片预览和上传的具体代码，供大家参考，具体内容如下
vardailiApply={
change:function(evt){
evt.preventDefault();
varpic=document.getElementById("preview"),
file=document.getElementById("f");
varext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
//gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("图片的格式必须为png或者jpg或者jpeg格式！");
return;
}
varisIE=navigator.userAgent.match(/MSIE/)!=null,
isIE6=navigator.userAgent.match(/MSIE6.0/)!=null;
if(isIE){
file.select();
varreallocalpath=document.selection.createRange().text;
//IE6浏览器设置img的src为本地路径可以直接显示图片
if(isIE6){
pic.src=reallocalpath;
}else{
//非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\""+reallocalpath+"\")";
//设置img的src为base64编码的透明图片取消显示浏览器默认图片
pic.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
varfile_arr=file.files;
varul=$(".weui_uploader_files");
if(file_arr.length<7){
for(varkeyinfile_arr){
if(file_arr.hasOwnProperty(key)){
varf=file_arr[key];
varurl=URL.createObjectURL(f);
varreader=newFileReader();
console.log(f);
reader.readAsDataURL(f);
n+=1;
if(n<7){
reader._onload=function(e){
//拼接显示预览图片的html
varlist=$(""+
""+
"X");
ul.append(list);
//将转化后的图片地址放在img中
varpic=document.getElementById('preview'+n);
//pic.src=this.result;
pic.src=url;
dailiApply.compress(f,.7,undefined);
//images.push(f);
document.getElementById('delImg'+n).addEventListener("click",function(){
$(this).parent().remove();
--n;
});
};
reader._onload();
}else{
$.alert("最多上传6张图片");
n=6;
}
}
}
}else{
$.alert("最多上传6张图片");
}
}
returnfalse;
},
/**
*@param{Object}finput选择的图片必填
*@param{String}quality图片压缩的质量[0,1]
*@param{String}output_img_type输出图片的类型
*/
compress:function(f,quality,output_img_type){
varmime_type="image/jpeg";
if(output_img_type!=undefined&&output_img_type=="image/png"){
mime_type="image/png";
}
createImageBitmap(f).then(function(imageBitmap){
varmax=1000;//设置最大分辨率
varc_w='';
varc_h='';
varwidth=imageBitmap.width;
varheight=imageBitmap.height;
//等比例缩放
if(width>max||height>max){
if(width>height){
c_w=max;
c_h=max*height/width;
}else{
c_h=max;
c_w=max*width/height;
}
}else{//不缩放
c_w=width;
c_h=height;
}
varcanvas=document.createElement('canvas');
canvas.width=c_w;
canvas.height=c_h;
varctx=canvas.getContext('2d');
ctx.drawImage(imageBitmap,0,0,width,height,0,0,c_w,c_h);
canvas.toBlob(function(blob){
images.push(blob);
},mime_type,quality);
});
},
submit:function(){
varcontent=$(".weui_textarea").val().trim();
varxhr=newXMLHttpRequest();
varfd=newFormData(document.getElementById('uploadForm'));
$.each(images,function(i,e){
fd.append("images",e);
});
fd.append("remark",content);
fd.append("substationproxyId",8);
console.log(images);
console.log(fd);
if(content){
$.ajax({
url:CONFIG.API.addSubProxyRecruit,
type:"POST",
data:fd,
processData:false,//telljQuerynottoprocessthedata
contentType:false,//telljQuerynottosetcontentType
beforeSend:function(xhr){
$.showLoading();
$(this).prop("disabled",true)
},
success:function(json){
console.log(json);
$.hideLoading();
$(this).prop("disabled",false);
if(json.errorCode==0){
$.alert("保存成功",function(){
location.reload();
})
}elseif(json.errorCode=="-101"){
$.alert('出错：'+json.message,function(){
location.href=CONFIG.HTML.login;
});
}else{
$.alert(json.message,function(){
})
}
}
});
}else{
$.alert('请输入内容');
}
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。