浏览器本地预览图片并Ajax上传到服务器(谷歌火狐 ,IE不兼容)

来源：互联网发布：91pom软件下载编辑：程序博客网时间：2024/06/01 07:11

html代码:

主要包含:

1,图片文件按钮2预览图片的img标签

                       <table><tr><td>选择图片</td><td id="tdfile"><input type="file" id="imgfile" name="myfile"></td></tr><tr><td>图片预览</td></tr><tr><td><div><img id="yulan" src="" style="width: 100px;height: 100px;"/></div></td></tr></table>

js代码

1,本地预览图片

//本地图片预览 ,调用方法$("#imgfile").change(function(e) { //当文件改变时候preImg("imgfile", "yulan") //预览图片到浏览器(本地图片)});

/** * 将本地图片 显示到浏览器上 */function preImg(sourceId, targetId) {var url = getFileUrl(sourceId);var imgPre = document.getElementById(targetId);imgPre.src = url;}/** * 从 file 域获取 本地图片 url ,兼容性方案 */function getFileUrl(sourceId) {var url;if(navigator.userAgent.indexOf("MSIE") >= 1) { // IEurl = document.getElementById(sourceId).value;} else if(navigator.userAgent.indexOf("Firefox") > 0) { // Firefoxurl = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));} else if(navigator.userAgent.indexOf("Chrome") > 0) { // Chromeurl = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));}return url;}

2, ajax上传部分:

//获取图片空间值 ,根据是否需要上传图片执行不同的ajax

var isnewfile = document.getElementById("imgfile").value;

$.ajaxFileUpload({url: "xx/xxx/xxx",type: 'post',secureuri: false, //是否启用安全提交,默认为falsefileElementId: 'imgfile', //文件选择框的id属性contentType: "text/html; charset=utf-8",//dataType: 'json',//注释此行 ,1success: function(data, status) {

//把返回的数据data转换2次 ,解决谷歌data无法解析var str = $(data).find("body").text();//var data = $.parseJSON(str);console.log(data)if(data.success == "true") {console.log(data.path)//$("#yulan").attr("src", "../customerOrganizationController/getImgIo?path=" + data.path);//$("#yulan").attr("src", "E:/img/20161129/f1e00f506d92de9edf8b200b331cc806.png");$("#org_icon").val(data.path); //把上传成功后的照片的地址赋值给隐藏域//重新封装 form数据}},error: function(data, status, e) {}});

0 0