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

在介绍这个插件之前，先吐槽一下。这个插件功能很强大。带有的功能有：上传（单个文件或批量文件）,自动上传或点击按钮上传，上传前缩略图显示，判断文件格式，上传前的文件操作，上传时进度条显示等功能。如果你用的是最新的浏览器，那么所有的功能都能正常使用。但如果你或你的用户使用的是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));
    }
                
}

四、测试说明

测试环境：chrome,firefox,ie9
开发环境：vs2010
测试图片：

测试文件下载：http://www.1100w.com/wp-content/uploads/2013/10/UploadTest1.rar