您的位置：首页 > Web前端 > JavaScript

适用于各浏览器支持图片预览，无刷新异步上传js插件

2013-10-16 20:15 585 查看

文件上传无疑是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插件

<!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>

View Code
上面的代码中已经包含了图片预览的功能，使用非常简单我就不多言了，只需要给定用于显示图片的元素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 = 0; i < files.Count; i++)
{
filenames.Add(files[i].FileName);
}

Response.Write(string.Join("___", filenames));
Response.Flush();
Response.End();
}
}

服务端代码为多文件上传处理的方式，呵呵也就是说这个插件也是支持多文件上传的，在服务端的代码中我仅仅返回了上传文件的名称作为对客户端的响应，当然你可以返回任何你希望的形式，你只需要在客户端用js做相应处理即可（即在插件的complete这个回调中处理响应，它其中的msg回调参数将把服务端的响应结果回传给你）。

好了一个兼容各种浏览器，并且支持图片预览和无刷新异步上传的纯js插件就搞定了。上个图看看效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航