码迷,mamicode.com
首页 > Web开发 > 详细

文件上传之——用SWF插件实现文件异步上传

时间:2016-12-25 23:39:07      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:response   rect   query   rac   max   url   兼容   handle   datetime   

之前提高过几篇文件上传,那些都不错。今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传。

使用Flash的好处就是可以解决浏览器兼容性问题。之前我写的一个快捷复制功能也是利用的Flash。

最近一直在用MVC,所以还是以MVC举例;先来张效果图:

技术分享技术分享

技术分享

UploadIndex2.cshtml代码:

技术分享
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>上传</title>
    <script src="~/SWFUpload/swfupload.js" type="text/javascript"></script>
    <script src="~/SWFUpload/handlers.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "@Url.Action("HandlerUpload2","Home")",//上传路径
                post_params: {
                    "ASPSESSID": "<@Session.SessionID>"
                },

                // File Upload Settings
                file_size_limit: "5 MB",
                file_types: "*.jpg;*.gif",
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: showData,
                upload_complete_handler: uploadComplete,

                // Button settings
                button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",//设置按钮图片,注意要是连续的四张
                button_placeholder_id: "spanButtonPlaceholder",//设置按钮id
                button_width: 160,
                button_height: 22,
                button_text: <span class="button">请选择上传图片 <span class="buttonSmall">(5 MB Max)</span></span>,
                button_text_style: .button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; },
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                // Flash Settings
                flash_url: "/SWFUpload/swfupload.swf", // Relative to this file
                flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
        //上传成功以后执行该方法.
        function showData(file, serverData) {
            $("#imgSrc").attr("src", serverData);
        }
    </script>
</head>
<body>
    <form id="form1">

        <div id="content">

            <div id="swfu_container" style="margin: 0px 10px;">
                <div>                 
                    <span id="spanButtonPlaceholder"></span>  <!--注意:这个ID要和上面的一致-->                
                </div>                          
             
             
                <img id="imgSrc" /><!---在这里显示上传的图片,这个插件采用的为异步上传-->
            </div>
        </div>
    </form>
</body>
</html>
View Code

 

后端代码:

技术分享
  public ActionResult UploadIndex2()
        {
            return View();
        }
       
        [HttpPost]
        public ActionResult HandlerUpload2()
        {
            HttpPostedFileBase file = Request.Files["Filedata"];//获取文件数据.
            string fileName = Path.GetFileName(file.FileName);//获取文件名.
            string fileExt = Path.GetExtension(fileName);    //获取文件类型
            string fullDir = "";
            if (fileExt == ".jpg")
            {
                string dir = "/UploadImage/" + DateTime.Now.Year + "-" + DateTime.Now.Month + "-" + DateTime.Now.Day + "/";
                Directory.CreateDirectory(Path.GetDirectoryName(Server.MapPath(dir)));//如果没有文件目录,创建.
                fullDir = dir + OnLineBooks.App.Common.WebCommon.GetStreamMD5(file.InputStream) + fileExt;//构建了一个完整路径,并且以文件流的MD5值作为文件的名称,解决了文件名称重名问题。
                file.SaveAs(Server.MapPath(fullDir));//文件保存
                 Response.Write(fullDir);              
            }
            return Content(fullDir);//返回图片路径
        }
View Code

 

SWFUpload文件下载链接:http://pan.baidu.com/s/1c2xIf5Y 密码:wphd

 

文件上传之——用SWF插件实现文件异步上传

标签:response   rect   query   rac   max   url   兼容   handle   datetime   

原文地址:http://www.cnblogs.com/shuai7boy/p/6220774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!