js实现图片上传并正常显示

项目经常会用到头像上传，那么怎么实现呢？

首先是超文本标记语言布局：

标签为='缩略图class='col-md-3控制标签'缩略图/labeldiv class='col-md-6 '输入类型=' file ' class=' form-control ' id='缩略图' name='缩略图'/divjquery方式，IE不支持，但工业管理学(工业工程)会获得绝对的上传路径信息：

函数getObjectURL(文件){ var URL=null if(window . createobjecturl！=未定义){ //基本url=window.createObjectURL(文件);} else if(窗口。网址！=未定义){//Mozilla(Firefox)URL=window .URL.createObjectURL(文件);} else if (window.webkitURL！=未定义){ //webkit或chrome URL=窗口。webkiturl。createobjecturl(文件);}返回url} $(' #缩略图')。change(function(){ var eImg=$(' img/')；eImg.attr('src '，getObjectURL($(this)[0]).文件[0]);//或this.files[0] this-input $(this).后(EImg)；});

网上找一份可用的代码非常不易，经过不断的筛选总结才得出兼容所有的文件上传显示超文本标记语言布局

表单操作=' '方法='post '名称='myform '输入类型=' file ' id=' iptfileupload ' onchange=' show()' value=' '/img src=' 1。jpg ' alt=' id=' img '/formJS代码：

脚本类型='text/javascript '函数getPath(obj，fileQuery，transImg) { var imgSrc=' '，imgArr=[]，strSrc=if(window。领航员。用户代理。indexof(' MSIE ')=1){//IE浏览器判断如果。选择){ obj。select()；var path=文档。选择。创建范围().文本；警报(路径);物体。移除属性(' src ')；imgSrc=file query . valueimgarr=imgSrc . split(' . ') ;strSrc=imgArr[imgArr.length - 1].toLowerCase()；if(strsrc。区域设置比较(' jpg ')==0 | | strsrc。区域设置比较(' JPEG ')==0 | | strsrc。区域设置比较(' gif ')==0 | | strsrc。区域设置比较(' png ')===0){ obj。setattribute(' src '，trans img)；物体。风格。filter=' progid : maximagettransform .微软。AlphaimageLoader(src=' '路径'，调整方法=' scale ')；'；//IE通过滤镜的方式实现图片显示} else {//尝试{抛出新错误('文件类型错误！请上传图像文件。);//} catch(e){//alert(' name : ' e . name ' message : ' e . message)；//} } } else {//alert(Filequery。值)；img src=file query . value imgarr=img src . split('。') ;strSrc=imgArr[imgArr.length - 1].toLowerCase()；if(strsrc。区域设置比较(' jpg ')==0 | | strsrc。区域设置比较(' JPEG ')==0 | | strsrc。区域设置比较(' gif ')==0 | | strsrc。区域设置比较(' png ')===0){ obj。src=文件查询。价值；} else {//尝试{抛出新错误('文件类型错误！请上传图像文件。) ;//} catch(e){//alert(' name : ' e . name ' message : ' e . message)；//} } } } else { var file=Filequery。文件[0]；var reader=new FileReader()；读者。onload=function(e){ IMgsrc=Filequery。价值；imgArr=imgSrc.split(' . ') ;strSrc=imgArr[imgArr.length - 1].toLowerCase()；if(strsrc。区域设置比较(' jpg ')==0 | | strsrc。区域设置比较(' JPEG ')==0 | | strsrc。区域设置比较(' gif ')==0 | | strsrc。区域设置比较(' png ')===0){ obj。setattribute(' src '，e . target。结果)；} else {//尝试{抛出新错误('文件类型错误！请上传图像文件。) ;//} catch(e){//alert(' name : ' e . name ' message : ' e . message)；//} }//alert(e . target。结果)；} reader.readAsDataURL(文件);} }函数show(){ //以下即为完整客户端路径var file _ img=document。getelementbyid(' img ')，iptfileupload=document。getelementbyid(' iptfileupload ')；getPath(file_img，iptfileupload，file _ img)；}/脚本更多精彩内容请参考专题《ajax上传技术汇总》 , 《javascript文件上传操作汇总》 和《jQuery上传操作汇总》 进行学习。

希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。