網站開發經常使用jQuery插件總結(15)上傳插件blueimp

時間 2019-12-09

標籤網站開發經常使用 jquery 插件總結上傳 blueimp 欄目網站開發简体版

原文原文鏈接

在介紹這個插件以前，先吐槽一下。這個插件功能很強大。帶有的功能有：上傳（單個文件或批量文件）,自動上傳或點擊按鈕上傳，上傳前縮略圖顯示，判斷文件格式，上傳前的文件操做，上傳時進度條顯示等功能。若是你用的是最新的瀏覽器，那麼全部的功能都能正常使用。但若是你或你的用戶使用的是ie8（包括ie8）如下的瀏覽器，那麼這個插件對於咱們來講就只能使用單文件上傳功能。ie9不支持上傳前縮略圖顯示。也就是說這個插件主要是面向ie10+，chrome,firefox新版本瀏覽器的。javascript

但爲何介紹這個插件呢，主要是由於這個插件是html5開發的，修改樣式很是簡單，不涉及到flash。在頭像設置功能或類別須要設置圖片中可使用。
若是須要兼用更多的瀏覽器，並實現批量上傳圖片的功能，仍是考慮用flash實現的插件吧，如uploadify。php

而在本次測試中，實現的功能是使用blueimp插件+asp.net實現單文件ajax上傳。
css

1、插件功能

結合服務器端開發語言，如asp.net,php等，實現文件上傳。html

2、官方地址

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

在官方地址中有demo演示，可是demo的演示只有前端。能夠下載demo，可是我下載的demo不能用。因此我就照着官方文檔開始測試。按照官方文檔，前端很好實現。可是服務端的實現，有其它語言的說明，asp.net的只提供了一個demo。我下載了這個demo，帶有批量上傳，在chrome運行下是成功的。因此我照着這個文件又寫了服務器端的代碼。html5

3、插件使用

1.引用文件。在這裏只實現單文件上傳，文件格式寫代碼判斷。java

<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.cssjquery

3.Js代碼。主要參考自官方文檔。git

$(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用於顯示返回的圖片,上傳完畢後顯示圖片。github

<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));
    }
                
}