适用于各浏览器支持图片预览，无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能，不管是PHP、jsp还是aspx、mvc等都会需要文件上传，但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况。当然现在有了html5这个好东西，我们可以调用它的新的api来做文件的异步上传。但是非常可惜，这个新的api并非每个浏览器都支持。
如果你会flash这当然很好，你可以自己写一个flash的上传插件来支持上传，不过本文不会对flash这个技术做任何的讨论。
好了言归正传，我们还是来讨论下只使用js的情况下如何才能异步无刷新的上传文件，首先估计大家会想到ajax，不过很不幸在目前没有html5支持的浏览器中使用ajax上传文件是不行的，而在国内使用支持html5浏览器的用户还不是绝大多数，那么这种方案只能放弃。
还有没有办法喃？当然有那就是使用iframe，看下面的html代码：
<body>
<form action="WebForm1.aspx" target="dynamic_creation_upload_iframe" method="POST" enctype="multipart/form-data">
<input type="file" name="upload1" />
</form>
<iframe name="dynamic_creation_upload_iframe"></iframe>
</body>
这是一段我们经常使用的上传代码，如果你使用的是asp.net控件，它最终也会生成这样的html代码，其中的enctype就是指定需要上传文件的属性（action和method属性就不需要解释了吧）。不过在这个form上我添加了一个target属性，并且指定了它的值为下面那个iframe的name属性的值，这是为什么？其实很简单，就是当你提交这个form时（这样就开始了文件上传），等服务端接收到文件并保存成功响应客户端时，将响应的内容直接在这个iframe中刷新，这样这个iframe就起到了一个隔离的作用，此时我们只需要在这个iframe上绑定一个onload事件，那么当它刷新时这个事件将被触发，呵呵 我们就可以在这个load事件中做事情了（例如：在load的时候获取服务端响应的结果，从而得知上传是否成功）
有了这个思路事情就好办了，以下是根据这种思路构建的一个js插件
/*
无刷新异步上传插件
2013-10-16 Devotion Created
*/
(function ($) {
var defaultSettings = {
url: "", //上传地址
buttonFeature: true, //true:点击按钮时仅选择文件； false:选择完文件后立即上传
fileSuffixs: ["jpg", "png"], //允许上传的文件后缀名列表
errorText: "不能上传后缀为 {0} 的文件！", //错误提示文本，其中{0}将会被上传文件的后缀名替换
onCheckUpload: function (text) { //上传时检查文件后缀名不包含在fileSuffixs属性中时触发的回调函数，(text为错误提示文本)
alert(text);
},
onComplete: function (msg) { //上传完成后的回调函数[不管成功或失败，它都将被触发](msg为服务端的返回字符串)
}, onChosen: function (file, obj) { //选择文件后的回调函数，(file为选中文件的本地路径;obj为当前的上传控件实例)
//alert(file);
},
maximumFilesUpload: 5,//最大文件上传数(当此属性大于1时，buttonFeature属性只能为true)
onSubmitHandle: function (uploadFileNumber) { //提交上传时的回调函数，uploadFileNumber为当前上传的文件数量
//在此回调中返回false上传提交将被阻止
return true;
},
onSameFilesHandle: function (file) { //当重复选择相同的文件时触发
//在此回调中返回false当前选择的文件将从上传队列中取消
return true;
},
perviewImageElementId: "",//用于预览上传图片的元素id（请传入一个div元素的id） perviewImgStyle: null//用于设置图片预览时的样式（可不设置，在不设置的情况下多文件上传时只能显示一张图片），如{ width: '100px', height: '100px', border: '1px solid #ebebeb' }
}; $.fn.uploadFile = function (settings) { settings = $.extend({}, defaultSettings, settings || {}); if (settings.perviewImageElementId) {
//设置图片预览元素的必须样式
if (!settings.perviewImgStyle) {
var perviewImg = document.getElementById(settings.perviewImageElementId);
perviewImg.style.overflow = "hidden";
}
} return this.each(function () {
var self = $(this); var upload = new UploadAssist(settings); upload.createIframe(this); //绑定当前按钮点击事件
self.bind("click", function (e) {
upload.chooseFile();
}); //将上传辅助类的实例，存放到当前对象中，方便外部获取
self.data("uploadFileData", upload); //创建的iframe中的那个iframe，它的事件需要延迟绑定
window.setTimeout(function () { //为创建的iframe内部的iframe绑定load事件
$(upload.getIframeContentDocument().body.lastChild).on("load", function () {
var dcmt = upload.getInsideIframeContentDocument();
if (dcmt.body.innerHTML) { if (settings.onComplete) {
settings.onComplete(dcmt.body.innerHTML);
} dcmt.body.innerHTML = "";
}
});
}, 100);
});
};
})(jQuery); //上传辅助类
function UploadAssist(settings) {
//保存设置
this.settings = settings;
//已选择文件的路径集合
this.choseFilePath = [];
//创建的iframe唯一名称
this.iframeName = "upload" + this.getInputFileName();
return this;
} UploadAssist.prototype = {
//辅助类构造器
constructor: UploadAssist, //创建iframe
createIframe: function (/*插件中指定的dom对象*/elem) { var html = "<html>"
+ "<head>"
+ "<title>upload</title>"
+ "<script>"
+ "function getDCMT(){return window.frames['dynamic_creation_upload_iframe'].document;}"
+ "</" + "script>"
+ "</head>"
+ "<body>"
+ "<form method='post' target='dynamic_creation_upload_iframe' enctype='multipart/form-data' action='" + this.settings.url + "'>"
+ "</form>"
+ "<iframe name='dynamic_creation_upload_iframe'></iframe>"
+ "</body>"
+ "</html>"; this.iframe = $("<iframe name='" + this.iframeName + "'></iframe>")[0];
this.iframe.style.width = "0px";
this.iframe.style.height = "0px";
if (!$.browser.msie) {
this.iframe.style.display = "none";
} elem.parentNode.insertBefore(this.iframe, elem);
var iframeDocument = this.getIframeContentDocument();
iframeDocument.write(html);
}, //获取上传控件名称
getInputFileName: function () {
return (new Date()).valueOf();
}, //创建上传控件到创建的iframe中
createInputFile: function () {
var that = this;
var dcmt = this.getIframeContentDocument();
var input = dcmt.createElement("input");
input.type = "file";
input.setAttribute("name", "input" + this.getInputFileName());
input.onchange = function () { var fileSuf = this.value.substring(this.value.lastIndexOf(".") + 1); //检查是否为允许上传的文件
if (!that.checkFileIsUpload(fileSuf, that.settings.fileSuffixs)) {
that.settings.onCheckUpload(that.settings.errorText.replace("{0}", fileSuf));
return;
} //选中后的回调
that.settings.onChosen(this.value, this); if (that.checkFileIsExist(this.value)) {
//保存已经选择的文件路径
that.choseFilePath.push({ "name": this.name, "value": this.value });
var status = that.settings.onSameFilesHandle(this.value);
if (typeof status === "boolean" && !status) {
that.removeFile(this.value);
return;
}
} else {
//保存已经选择的文件路径
that.choseFilePath.push({ "name": this.name, "value": this.value });
} //是否开启了图片预览
if (that.settings.perviewImageElementId) {
if (!that.settings.perviewImgStyle) {
perviewImage.beginPerview(this, that.settings.perviewImageElementId);
} else {
var ul = perviewImage.getPerviewRegion(that.settings.perviewImageElementId);
var main = perviewImage.createPreviewElement(this.value);
var li = document.createElement("li");
//li.style.float = "left";
if ($.browser.msie) {
li.style.styleFloat = "left";
}
else {
li.style.cssFloat = "left";
} li.style.margin = "5px";
li.appendChild(main);
ul.appendChild(li);
var div = $(main).children("div").get(0);
$(main).children("img").hover(function () {
this.src = perviewImage.closeImg.after;
}, function () {
this.src = perviewImage.closeImg.before;
}).click(function () {
that.removeFile($(this).attr("filepath"));
$(this).parents("li").remove("li");
});
perviewImage.beginPerview(this, div, dcmt);
}
} if (!that.settings.buttonFeature) {
that.submitUpload();
}
};
dcmt.forms[0].appendChild(input);
return input;
}, //获取创建的iframe中的document对象
getIframeContentDocument: function () {
return this.iframe.contentDocument || this.iframe.contentWindow.document;
}, //获取创建的iframe所在的window对象
getIframeWindow: function () {
return this.iframe.contentWindow || this.iframe.contentDocument.parentWindow;
}, //获取创建的iframe内部iframe的document对象
getInsideIframeContentDocument: function () {
return this.getIframeWindow().getDCMT();
}, //获取上传input控件
getUploadInput: function () {
var inputs = this.getIframeContentDocument().getElementsByTagName("input");
var len = inputs.length; if (len > 0) {
if (!inputs[len - 1].value) {
return inputs[len - 1];
} else {
return this.createInputFile();
}
}
return this.createInputFile();
}, //forEach迭代函数
forEach: function (/*数组*/arr, /*代理函数*/fn) {
var len = arr.length;
for (var i = 0; i < len; i++) {
var tmp = arr[i];
if (fn.call(tmp, i, tmp) == false) {
break;
}
}
}, //提交上传
submitUpload: function () {
var status = this.settings.onSubmitHandle(this.choseFilePath.length);
if (typeof status === "boolean") {
if (!status) {
return;
}
}
this.clearedNotChooseFile();
var dcmt = this.getIframeContentDocument();
dcmt.forms[0].submit();
}, //检查文件是否可以上传
checkFileIsUpload: function (fileSuf, suffixs) { var status = false;
this.forEach(suffixs, function (i, n) {
if (fileSuf.toLowerCase() === n.toLowerCase()) {
status = true;
return false;
}
});
return status;
}, //检查上传的文件是否已经存在上传队列中
checkFileIsExist: function (/*当前上传的文件*/file) { var status = false;
this.forEach(this.choseFilePath, function (i, n) {
if (n.value == file) {
status = true;
return false;
}
});
return status;
}, //清除未选择文件的上传控件
clearedNotChooseFile: function () {
var files = this.getIframeContentDocument().getElementsByTagName("input"); this.forEach(files, function (i, n) {
if (!n.value) {
n.parentNode.removeChild(n);
return false;
}
});
}, //将指定上传的文件从上传队列中删除
removeFile: function (file) {
var that = this;
var files = this.getIframeContentDocument().getElementsByTagName("input");
this.forEach(this.choseFilePath, function (i, n) {
if (n.value == file) {
that.forEach(files, function (j, m) {
if (m.name == n.name) {
m.parentNode.removeChild(m);
return false;
}
});
that.choseFilePath.splice(i, 1);
return false;
}
});
}, //清空上传队列
clearUploadQueue: function () {
this.choseFilePath.length = 0;
this.getIframeContentDocument().forms[0].innerHTML = "";
}, //选择上传文件
chooseFile: function () {
var uploadfile;
if (this.choseFilePath.length == this.settings.maximumFilesUpload) {
if (this.settings.maximumFilesUpload <= 1) {
this.choseFilePath.length = 0;
var files = this.getIframeContentDocument().getElementsByTagName("input");
if (!files.length) {
uploadfile = this.getUploadInput();
$(uploadfile).click();
return;
} else {
uploadfile = files[0];
$(uploadfile).click();
return;
}
} else {
return;
}
}
uploadfile = this.getUploadInput();
$(uploadfile).click();
}
}; //图片预览操作
var perviewImage = {
timers: [],
closeImg: {
before: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAOVSURBVHjaYtTUdGdAA4K/fv3U+Pv3rw+QLfT//3+Gf//+vWNiYtjCwsJyAyj2HiT2//8/sGKAAGJB1gkU9Pj581eNnJyctaamMgM/Py8DIyMDw+fPXxlu3rxfdfPmjaPMzIwtTEzMO2B6AAKIBaH5fw4LC1tHeHgQt7u7PYOOjhIDNzcb2IBfv/4x3LjxiGHr1n3WK1duXPPx45sKJiamKSB9AAHECPIC0GZ3ZmbWzQkJkazu7rYMLCyMDD9//gYZCzWcgYGVlRUozsxw9Oh5hv7+Gb8/fXrnC+TvBAggZhERZb7fv3/PdnCwV7C3twT69w+DlpYcw5s3HxkeP34FdP53IPsDg6qqNAMXFxvQIA4GoGXMFy9eVgK6eg1AADH9/ftbW0hIxEpFRQms0MBAlYGDg51BQ0OegZ2dneH58zdAMRUGKSlhBnFxQYY7dx4CvfSHQVBQyAqkFyCAmIWEFDOlpaVtgQHH8O7dB4aXLz8wqKjIMHBysoE1SUqKMCgoSIC90te3lGHNmu0MDx8+Yfjx4xvQmz9eAgQQCzAwhBiBIfX69RugwC+GR4+eAl3yliEx0Y+Bl5eDQU5ODBwG3d0LGdau3QH0AjMwLFiBruQEBjCTEEAAsYBC+du3HwxPnjxnAMY90JCfoLBlePXqLdAAabDNX778AHvl37+/QP9DYubfP0haAAggJlAi+fr1M8Pbt2+Bml4z8PBwMxQURDMoK0uDbf78+QfYJY2N2Qy2thZA//8CGsIMtOg70MI/7wACiAkYkluAfmH48+cPMOHwMbS1FTJoaspB/bwYqHE6w4cP3xn4+DgYWltzgAGqywCMNbABQBdsAQggJmAsX/3+/esxkPNAoX7jxgNQomKYMWMtw65dRxkuXLjGMHHiEobv338x3Lv3DEhDLAO6+hjQq1cBAohRWdkOqOGvOwcHz2Z1dU1WcXEJBgkJYYbbtx+AExIogH/9+s2gra0KDOgPwLTxmOHKlfO/v3z55AtM0jsBAggYjfKg0Lz769eP958/f7FnZ2djAyYUBhERQWBUcgLDhItBWFiY4f37j8AYeshw/frVr1++fCwFal4O8iZAAIENAKdpRoZTwLg99/Llc8VPnz7JffnyFWQwMAa+Mdy/fw+YmW4w3Lp1/eiPH19zgJqXwfIQQACBvQDNiaBsC/K/IDCQNICKfNjYWIVAYQNMH++AIb4FGPrg7IycgwECDADIUZC5UWvTuwAAAABJRU5ErkJggg==",
after: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1wwbFhkQHxvdFgAAArpJREFUeNplz1to1QUAx/HP/3/O2c7OrudsR8vmamOL2hw5LaQHgxKCLvQSRVgPFhJKo4cyMsmxKNQgfOuhfKxICQTpocvAIFhai/WSTNIcnK3pbu12tnO2cwsfbZ+H3+MXfgGbfURDgn0xHgiIFskUuPgOE/7njsBxahsYqAnDN1p3765N9/QIYzGL4+Myw8PlbC53fp23j5HZFBhgSxPft27f3tfX36+ure2O+sbKiitnzrg2MjK/xjNH+RUCeJbo41xsSyb3PtR/WLQuLhIGVAJKlEsUSyUBrp8966+xsdkl+o7zTwiP8mqSvffu6ZMLs+565YAVWRvL1xSWrpufvmHr/v3y1dVu30pHIuk4pxCEiCQ4nIyEYk15heakmm3bdR06Zrq0LjM3ruPNI+o7O8V7uy1NTkjV10vw4ns0Rw6Q7uCTdLwS1LfMyM+Mytxa0r73aVse2adp52Oau7pd/eGCq4MHNUxPKc4sy1dEylwOt3FPNUH09gTrWhILSr+d9N3pQfGGpHRXjz9/+tHoqRe0t8yqasyK1lKNKlrDdYpVCEqUixRLLBZTep98DkD7zofFO3pVGqlqJlJDDDEK4TkmQlbXc+QWGZ9P2TMwpHXHLpnL541+dVRtMuWp00NmGncpxCkUCLDGWDjJWp6LG0XmJtn6xOu2PrjLzUvn3fr6JdVXP3btmyNqGlN2vHbC/Dxry5SZ+pTfIyh3MN3Jyxt54cKVYYXVKZPn3peIFkTK5G5ckp34W+bLE7IjeWGOOT78gp8DQPwzBtt5dymkkqTmbuIpYnUEAblZsldIrLLB0AGeX2QlAEDD5xy7n7eWia2GlKsREhaIb9CEZS58wKFRplGJAGD9W36JMXwf9cmKdF1RIlGgrmS1zOU/GDjIyZv8iwoENguRQKqblnqiI8yUWUAWJQD4D4Cg/5i7WltRAAAAAElFTkSuQmCC"
}, //获取预览元素
getElementObject: function (elem) {
if (elem.nodeType && elem.nodeType === 1) {
return elem;
} else {
return document.getElementById(elem);
}
},
//开始图片预览
beginPerview: function (/*文件上传控件实例*/file, /*需要显示的元素id或元素实例*/perviewElemId,dcmt) {
for (var t = 0; t < this.timers.length; t++) {
window.clearInterval(this.timers[t]);
}
this.timers.length = 0; var preview_div = this.getElementObject(perviewElemId); var MAXWIDTH = preview_div.clientWidth;
var MAXHEIGHT = preview_div.clientHeight; if (file.files && file.files[0]) { //此处为Firefox，Chrome以及IE10的操作
preview_div.innerHTML = "";
var img = document.createElement("img");
preview_div.appendChild(img);
img.style.visibility = "hidden";
img.onload = function () {
var rect = perviewImage.clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.style.width = rect.width + 'px';
img.style.height = rect.height + 'px';
img.style.marginLeft = rect.left + 'px';
img.style.marginTop = rect.top + 'px';
img.style.visibility = "visible";
} var reader = new FileReader();
reader.onload = function (evt) {
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
else {//此处为IE6，7，8，9的操作
file.select();
var src = dcmt.selection.createRange().text; var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";
var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + src + "')"; preview_div.innerHTML = "";
var img = document.createElement("div");
preview_div.appendChild(img);
img.style.filter = img_sFilter;
img.style.visibility = "hidden";
img.style.width = "100%";
img.style.height = "100%"; function setImageDisplay() {
var rect = perviewImage.clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
preview_div.innerHTML = "";
var div = document.createElement("div");
div.style.width = rect.width + 'px';
div.style.height = rect.height + 'px';
div.style.marginLeft = rect.left + 'px';
div.style.marginTop = rect.top + 'px';
div.style.filter = div_sFilter;
preview_div.appendChild(div);
} //图片加载计数
var tally = 0; var timer = window.setInterval(function () {
if (img.offsetHeight != MAXHEIGHT) {
window.clearInterval(timer);
setImageDisplay()
} else {
tally++;
}
//如果超过两秒钟图片还不能加载，就停止当前的轮询
if (tally > 20) {
window.clearInterval(timer);
setImageDisplay()
}
}, 100); this.timers.push(timer);
}
},
//按比例缩放图片
clacImgZoomParam: function (maxWidth, maxHeight, width, height) {
var param = { width: width, height: height };
if (width > maxWidth || height > maxHeight) {
var rateWidth = width / maxWidth;
var rateHeight = height / maxHeight; if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
} else {
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
} param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
},
//创建预览元素
createPreviewElement: function (/*上传时的文件名*/file, /*预览时的样式*/style) {
style = style || { width: '100px', height: '100px', border: '1px solid #ebebeb' };
var img = document.createElement("div");
img.title = file;
img.style.overflow = "hidden";
for (var s in style) {
img.style[s] = style[s];
}
var text = document.createElement("div");
text.style.width = style.width;
text.style.overflow = "hidden";
text.style.textOverflow = "ellipsis";
text.style.whiteSpace = "nowrap";
text.innerHTML = file; var top = 0 - window.parseInt(style.width) - 15;
var right = 0 - window.parseInt(style.width) + 14;
var close = document.createElement("img");
close.setAttribute("filepath", file);
close.src = this.closeImg.before;
close.style.position = "relative";
close.style.top = top + "px";
close.style.right = right + "px";
close.style.cursor = "pointer"; var main = document.createElement("div");
main.appendChild(img);
main.appendChild(text);
main.appendChild(close);
return main;
}, //获取预览区域
getPerviewRegion: function (elem) {
var perview = $(this.getElementObject(elem));
if (!perview.find("ul").length) {
var ul = document.createElement("ul");
ul.style.listStyleType = "none";
ul.style.margin = "0px";
ul.style.padding = "0px"; var div = document.createElement("div");
div.style.clear = "both";
perview.append(ul).append(div);
return ul;
} else {
return perview.children("ul").get(0);
}
}
}
看看这个插件中的那个createIframe方法，对它做一点解释
//创建iframe
createIframe: function (/*插件中指定的dom对象*/elem) { var html = "<html>"
+ "<head>"
+ "<title>upload</title>"
+ "<script>"
+ "function getDCMT(){return window.frames['dynamic_creation_upload_iframe'].document;}"
+ "</" + "script>"
+ "</head>"
+ "<body>"
+ "<form method='post' target='dynamic_creation_upload_iframe' enctype='multipart/form-data' action='" + this.settings.url + "'>"
+ "</form>"
+ "<iframe name='dynamic_creation_upload_iframe'></iframe>"
+ "</body>"
+ "</html>"; this.iframe = $("<iframe name='" + this.iframeName + "'></iframe>")[0];
this.iframe.style.width = "0px";
this.iframe.style.height = "0px";
this.iframe.style.display = "none"; elem.parentNode.insertBefore(this.iframe, elem);
var iframeDocument = this.getIframeContentDocument();
iframeDocument.write(html);
},
大家应该都看到了这个方法中有一个html变量，它保存的其实就是文章开头的那段html。在这段html中我添加了一个function名为getDCMT的函数，这是为了获取名为dynamic_creation_upload_iframe的iframe所在的document对象。在form中我也去掉了文件上传的input控件，这是因为我将动态创建input控件到这个form中，并且我会将这段html使用js的方式把它添加到一个动态创建的iframe中。为什么要这样呢？呵呵 我想聪明的你一定会明白的！
好了插件做好了，我们如何来使用呢？
首先 将那段插件js代码保存为notRefreshFilesUpload.js的文件，方便在页面上的引用，然后构建包含如下结构的page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>files upload</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/notRefreshFilesUpload.js"></script>
<script>
$(function () { var btn = $("#Button1"); btn.uploadFile({
url: "WebForm1.aspx",
fileSuffixs: ["jpg", "png", "gif"],
buttonFeature: true,
errorText: "{0}",
maximumFilesUpload: 5,//最大文件上传数
onComplete: function (msg) {
$("#testdiv").html(msg);
},
perviewImageElementId: "fileList", //设置预览图片的元素id
perviewImgStyle: { width: '100px', height: '100px', border: '1px solid #ebebeb' }//设置预览图片的样式
}); var upload = btn.data("uploadFileData"); $("#files").click(function () {
upload.submitUpload();
});
});
</script> </head>
<body> <div style="width: 400px; height: 300px; float:left">
<input id="Button1" type="button" value="选择文件" />
<input id="files" type="button" value="上传" />
<div id="fileList" style="margin-top: 10px; padding-top:10px; border-top:1px solid #C0C0C0;font-size: 13px; width:400px"> </div>
</div>
<div id="testdiv"></div>
</body>
</html>
上面的代码中已经包含了图片预览的功能，使用非常简单我就不多言了，只需要给定用于显示图片的元素id即可，一般用div作为图片预览的元素。
以下是服务端的方法，在这里我使用了aspx作为服务端的接收方式，当然你可以换成其他任何语言或形式作为服务端的处理方案（可以是php、jsp、mvc等等）
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<string> filenames = new List<string>(); HttpFileCollection files = Request.Files; for (int i = ; i < files.Count; i++)
{
filenames.Add(files[i].FileName);
} Response.Write(string.Join("___", filenames));
Response.Flush();
Response.End();
}
}
服务端代码为多文件上传处理的方式，呵呵 也就是说这个插件也是支持多文件上传的，在服务端的代码中我仅仅返回了上传文件的名称作为对客户端的响应，当然你可以返回任何你希望的形式，你只需要在客户端用js做相应处理即可（即在插件的complete这个回调中处理响应，它其中的msg回调参数将把服务端的响应结果回传给你）。
好了 一个兼容各种浏览器，并且支持图片预览和无刷新异步上传的纯js插件就搞定了。上个图看看效果
适用于各浏览器支持图片预览，无刷新异步上传js插件的更多相关文章
- jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览（模拟异步上传）
在web开发中,最纠结的一项就是文件上传,最近由于项目需要前后摸索了四天在这里分享给大家.如有不足,望指出!! 前台:jquery.easyui.html 后台:thinkphp 主要涉及语言:jqu ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- mvc file控件无刷新异步上传操作
前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- h5 js 图片预览并判断 ajax上传
//建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...
- js实现图片预览、压缩、上传
先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- thinkphp3.2.2有预览的多图上传
thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...
- 【JS】ajax 实现无刷新文件上传
一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...
随机推荐
- 为operamasks增加HTML扩展方式的组件调用
#为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...
- Python 读取文件下所有内容、获取文件名、截取字符、写回文件
# coding=gbk import os import os.path #读取目录下的所有文件,包括嵌套的文件夹 def GetFileList(dir, fileList): newDir ...
- Hadoop概念学习系列之分布式数据集的容错性（二十七）
一般来说,分布式数据集的容错性有两种方式: 1.数据检查点 2.记录数据的更新 我们面向的是大规模数据分析,数据检查点操作成本很高:需要通过数据中心的网络连接在机器之间复制庞大的数据集,而网络带宽往往 ...
- EntityFramework简单例子
@(编程) 这个例子是用vs2013连接mysql数据库. 1. NuGet安装EF和mysql 略 2. 对象 namespace EFDemo { class Student { public s ...
- hdu 4115 Eliminate the Conflict （ 2-sat ）
Eliminate the Conflict Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
- CCF 201312-2 ISBN号码 (水题)
问题描述 每一本正式出版的图书都有一个ISBN号码与 之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”是分隔符(键盘上的减号),最后 ...
- DNS原理及其解析过程（转）
转自(http://369369.blog.51cto.com/319630/812889) 网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如 ...
- ThinkPHP C+F方式
ThinkPHP常用C+F方法进行配置设置于缓存设置 比如常见的 C(F('smtp'),'smtp');表示获取F方法中smtp缓存,设置配置为smtp函数 C方法是ThinkPHP用于设置.获取, ...
- 编译安装－Nginx
安装Nginx 1.环境准备 2.创建nginx用户 3.安装pcre-8.33.tar.gz 4.安装nginx-1.5.4.tar.gz 6.开机自启动 安装Nginx 1.环境准备 系统:Cen ...
- （图解版）SQL Server数据库备份与还原
本文介绍了SQL Server数据库备份的两种方式.一种是直接拷贝数据库中的文件mdf 和日志文件ldf,另一种是生成脚本语言. 第一种方式: 选中需要备份的数据库,将数据库从运行的数 ...