网站开发常用jQuery插件总结(15)上传插件blueimp

news/2024/5/9 13:12:07/文章来源:https://blog.csdn.net/weixin_30872671/article/details/96948641

在介绍这个插件之前，先吐槽一下。这个插件功能很强大。带有的功能有：上传（单个文件或批量文件）,自动上传或点击按钮上传，上传前缩略图显示，判断文件格式，上传前的文件操作，上传时进度条显示等功能。如果你用的是最新的浏览器，那么所有的功能都能正常使用。但如果你或你的用户使用的是ie8（包括ie8）以下的浏览器，那么这个插件对于我们来说就只能使用单文件上传功能。ie9不支持上传前缩略图显示。也就是说这个插件主要是面向ie10+，chrome,firefox新版本浏览器的。

但为什么介绍这个插件呢，主要是因为这个插件是html5开发的，修改样式非常简单，不涉及到flash。在头像设置功能或类别需要设置图片中可以使用。
如果需要兼用更多的浏览器，并实现批量上传图片的功能，还是考虑用flash实现的插件吧，如uploadify。

而在本次测试中，实现的功能是使用blueimp插件+asp.net实现单文件ajax上传。

一、插件功能

结合服务器端开发语言，如asp.net,php等，实现文件上传。

二、官方地址

https://github.com/blueimp/jQuery-File-Upload

在官方地址中有demo演示，但是demo的演示只有前端。可以下载demo，但是我下载的demo不能用。所以我就照着官方文档开始测试。按照官方文档，前端很好实现。但是服务端的实现，有其它语言的说明，asp.net的只提供了一个demo。我下载了这个demo，带有批量上传，在chrome运行下是成功的。所以我照着这个文件又写了服务器端的代码。

三、插件使用

1.引用文件。在这里只实现单文件上传，文件格式写代码判断。

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<!--jquery.fileupload.css是插件自动样式文件，主要用于隐藏file-->
<link href="css/jquery.fileupload.css" rel="stylesheet" type="text/css"/>
<!--按钮的样式文件,这个文件可以不引用-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

2.Css样式文件。主要是上传按钮的样式。可以看bootstrap.min.css

3.Js代码。主要参考自官方文档。

$(function () {$('#fileupload').fileupload({//replaceFileInput: false,dataType: 'json',url: '<%=ResolveUrl("upload.ashx") %>',add: function (e, data) {debugger;//写正则判断var re = /^.+\.((jpg)|(png))$/i;$.each(data.files, function (index, file) {//文件格式正确，上传if (re.test(file.name)) {data.submit();}});},done: function (e, data) {$.each(data.result, function (index, file) {//上传完毕后显示图片$('#result').html('<img src="images/' + file + '"/>');});}});
});

4.使用到的html代码。主要有一个按钮，一个file,一个div组成。div用于显示返回的图片,上传完毕后显示图片。

<div class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>ajax自动上传</span><input id="fileupload" type="file" name="file"/>
</div>
<div id="result"></div>

5.asp.net代码。在后台再次判断文件格式，压缩图片尺寸大小，然后保存。上传图片的更多操作可以看：asp.net图片上传操作总结。主要代码可以下载下面的“测试文件”

if (context.Request.Files.Count > 0)
{var file = context.Request.Files[0];if (Path.GetExtension(file.FileName).ToLower() != ".jpg" || Path.GetExtension(file.FileName).ToLower() != "png"){string path = context.Server.MapPath("~/images");string filename = Path.Combine(path, file.FileName);//file.SaveAs(filename);using(System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream)){//将图片尺寸压缩在保存，宽度最大为600，高度最大为600//按比例压缩PicHelper helper=new PicHelper(image,600,600);helper.CreateNewPic(filename);}var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();var result = new { name = file.FileName };context.Response.Write(serializer.Serialize(result));}}