文件上傳~Uploadify上傳控件

時間 2019-11-22

標籤文件上傳 uploadify 控件简体版

原文原文鏈接

對於文件上傳來講,有不少種實現方式,如傳統的表單方式,如今流行的flash方式,甚至還有純JS方式,之因此有這些方式來實現文件上傳,我想主要緣由是由於,傳統的上傳對於大文件支持不夠,由於它是單線程同步機制,當大文件經過HTTP方式發送到服務端時,對於服務端站點的主線程影響比較大,會產生阻塞,因此,如今不少上傳控制都是異步,多線程的方式去實現的.javascript

今天來介紹一個文件上傳控制,它就是Uploadify,它應該是flash的異步上傳工具,對於大文件支持還不錯,因此,我選擇了它.php

結構圖

HTML代碼

<div>
    <div class="inputDiv fl">
        <input type="text" name="ImagePath" id="ImagePath" style="width: 600px;">
        <img style="display: none;" />
    </div>
    <div class="fl" style="position: relative;">
        <input id="custom_file_uploadEdu" type="file" class="btn" />
        <a href="javascript:$('#custom_file_uploadEdu').uploadifyUpload()">上傳</a>| 
      <a href="javascript:$('#custom_file_uploadEdu').uploadifyClearQueue()">取消上傳</a>
    </div>
    <div id="displayMsg"></div>
</div>

JS代碼

<script type="text/ecmascript">

    $("#custom_file_uploadEdu").uploadify({
        'uploader': '/Scripts/Uploadify/uploadify.swf',
        'script': '/ashx/UploadFile.ashx',
        'cancelImg': '/Scripts/Uploadify/uploadify-cancel.png',
        'folder': '/',
        'queueSizeLimit': 1,
        'simUploadLimit': 1,
        'sizeLimit ': 1024 * 1024 * 5,
        'multi': false,
        'auto': false,/*若是是自動上傳,那上傳按鈕將沒用了*/
        'fileExt': '*.jpg;*.gif;*.jpeg;*.mp4',
        'fileDesc': '請選擇圖像或者視頻',
        'queueID': 'fileQueue',
        'width': 110,
        'height': 30,
        'buttonText': '選擇',
        'wmode': 'opaque',
        'hideButton': false,
        'onSelect': function (event, ID, fileObj) {
            $("#displayMsg").html("上傳中......");
        },
        'onComplete': function (event, queueId, fileObj, response, data) {
            var ary = response.split('|');
            if (ary[0] == "0") { //提示錯誤信息
                alert(ary[1]);
            }
            else {
                if (ary[0]=="1") {//上傳後的URL
                    $("#displayMsg").html("上傳成功")
                    $("#ImagePath").attr("value", ary[1]);
                    $("#ImagePath").remove("img").next("img").show().attr({ "style": "width:50px;height:50px;", "src": ary[1] });
                } else {//異常信息
                    alert(ary[1]);
                }
            }
        }
    });
</script>

後臺處理程序(接收流,寫入流)

namespace WebTest.ashx
{
    /// <summary>
    /// UploadFile 的摘要說明
    /// </summary>
    public class UploadFile : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            context.Response.Write(new UploadImpl().Upload(context, UpLoadType.ProductImage, false));

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

}

UploadImpl類代碼

namespace EntityFrameworks.Application.Core.FileUpload
{

    /// <summary>
    /// 圖像上傳功能的實現
    /// </summary>
    public class UploadImpl
    {
        public UploadImpl(IFileUploadSize fileUploadSize)
        {

            _fileUploadSize = fileUploadSize ?? new TestFileUploadSize();
        }
        public UploadImpl()
            : this(null)
        {

        }
        #region Fields & Consts
        static string FileHostUri = System.Configuration.ConfigurationManager.AppSettings["FileHostUri"]
            ?? HttpContext.Current.Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority;

        Point point = new Point(0, 0); //圖像從那個座標點進行截取
        double wRate = 1, hRate = 1, setRate = 1;
        int newWidth = 0, newHeight = 0;
        IFileUploadSize _fileUploadSize;
        #endregion

        #region  圖像縮放
        /// <summary>
        /// 圖像的縮放
        /// </summary>
        /// <param name="file">縮放文件</param>
        /// <param name="width">寬</param>
        /// <param name="height">高</param>
        /// <param name="isEqualScale">是否等比例縮放</param>
        /// <param name="name">縮放後存放的地址</param>
        /// <returns></returns>
        bool CreateThumbnail(HttpPostedFile file, ImageSize imageSize, bool isEqualScale, string name)
        {
            double width = (double)imageSize.Width;
            double height = (double)imageSize.Height; ;

            try
            {
                System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream);
                if (isEqualScale)
                {
                    if (image.Height > height)
                    {
                        hRate = height / image.Height;
                    }

                    if (image.Width > width)
                    {
                        wRate = width / image.Width;
                    }

                    if (wRate != 1 || hRate != 1)
                    {
                        if (wRate > hRate)
                        {
                            setRate = hRate;
                        }
                        else
                        {
                            setRate = wRate;
                        }
                    }

                    newWidth = (int)(image.Width * setRate);
                    newHeight = (int)(image.Height * setRate);
                    if (height > newHeight)
                    {
                        point.Y = Convert.ToInt32(height / 2 - newHeight / 2);
                    }
                    if (width > newWidth)
                    {
                        point.X = Convert.ToInt32(width / 2 - newWidth / 2);
                    }

                }
                Bitmap bit = new Bitmap((int)(width), (int)(height));
                Rectangle r = new Rectangle(point.X, point.Y, (int)(image.Width * setRate), (int)(image.Height * setRate));

                Graphics g = Graphics.FromImage(bit);
                g.Clear(Color.White);
                g.DrawImage(image, r);


                MemoryStream ms = new MemoryStream();
                bit.Save(ms, ImageFormat.Jpeg);
                byte[] bytes = ms.ToArray();
                string fileName = name + imageSize.ToString();//爲縮放圖像從新命名
                using (FileStream stream = new FileStream(fileName, FileMode.Create, FileAccess.Write))
                {
                    stream.Write(bytes, 0, bytes.Length);
                }
                bit.Dispose();
                ms.Dispose();
                image.Dispose();
                return true;
            }
            catch (Exception)
            {
                return false;
            }
        }
        /// <summary>
        /// 圖像的等比例縮放,默認文件名不改變，會將原文件覆蓋
        /// </summary>
        /// <param name="file"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        bool CreateThumbnail(HttpPostedFile file, ImageSize imageSize, string name)
        {
            return CreateThumbnail(file, imageSize, true, name);
        }
        #endregion

        public string Upload(HttpContext context, UpLoadType type, bool isScale)
        {

            ImageSize imageSize = _fileUploadSize.ImageSizeForType[type];

            HttpFileCollection files = context.Request.Files;

            if (files.Count == 0)
            {
                throw new ArgumentNullException("please choose file for upload.");
            }

            string path = "/upload/" + type.ToString();//相對路徑

            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            // 只取第 1 個文件
            var file = files[0];

            if (file != null && file.ContentLength > 0)
            {

                try
                {
                    string filename = context.Request.Form["fileName"].Split('.')[0]
                       + "_"
                       + DateTime.Now.ToString("yyyyMMddhhssmm")
                       + imageSize.ToString();

                    // 本地文件系統路徑
                    string savePath = Path.Combine(context.Server.MapPath(path), filename);
                    file.SaveAs(savePath);
                    if (isScale)
                        CreateThumbnail(file, imageSize, savePath);

                    //返回URI路徑
                    string ImageUri = FileHostUri
                        + path
                        + "/"
                        + filename;

                    return "1|" + ImageUri;
                }
                catch (Exception ex)
                {

                    return "0|" + ex.Message;
                }

            }
            return null;
        }

    }
}