使用webuploader上传文件

末蓝、 2022-10-13 12:52 202阅读 0赞

*  准备工作：添加需要的文件和页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]
 *  html页面（记得引入需要的js，css注意路径）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>文件上传</title>
        <script src="jquery.min.js"></script>
        <link href="webuploader-0.1.5/webuploader.css" rel="stylesheet" />
        <script src="webuploader-0.1.5/webuploader.min.js"></script>
        <style> #uploader { float: left; } /*用来显示上传的图片*/ #img1 { float: left; width: 50px; height: 40px; margin-left: 15px; border: 0; } /*去除image自带的边框*/ img[src=""], img:not([src]) { opacity: 0; } </style>
    </head>
    <body>
        <div id="uploader" class="wu-example">
            
            <input id="msg" style="display:none" />
            <div id="picker">选择文件</div>
        </div>
        
        <img id="img1" />
    </body>
    </html>
    <script> var uploader = WebUploader.create({ auto: true,// 选完文件后，是否自动上传。 swf: 'webuploader-0.1.5/Uploader.swf',// swf文件路径 server: 'WebUploader.ashx?type=UploadImage',// 文件接收服务端。 //dnd: '.upload-container', fileVal: "files", pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id multiple: false, // 选择多个 resize: false, auto: true, //chunked: true,// 开起分片上传。 threads: 5, // 上传并发数。允许同时最大上传进程数。 method: 'POST', // 文件上传方式，POST或者GET。 }); uploader.on('uploadSuccess', function (file, response) { if (response.code == 1) { //路径和图片的显示 $("#msg").val(response.data); $("#img1").attr("src", response.data); } }) </script>

*  一般处理程序

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    
    namespace WebUploader
    { 
        /// <summary>
        /// WebUploader 的摘要说明
        /// </summary>
        public class WebUploader : IHttpHandler
        { 
    
            public void ProcessRequest(HttpContext context)
            { 
                //调用对应方法
                var type = context.Request["type"];
                if(type == "UploadImage")
                { 
                    UploadImage(context);
                }
            }
    
            public void UploadImage(HttpContext context)
            { 
                try
                { 
                    //取文件
                    HttpPostedFile file = context.Request.Files["files"];
                    //取文件名
                    var temp = context.Request["name"];
                    //命名
                    string name = DateTime.Now.Ticks.ToString() + '-' + temp;
                    string pathSave = "/Upload/Images/";
                    string basePath = "";
                    basePath = context.Server.MapPath("~" + pathSave);
                    //判断文件夹是否存在，不存在就建立
                    if (!Directory.Exists(basePath))
                    { 
                        Directory.CreateDirectory(basePath);
                    }
                    var full = basePath + name;
                    //存储文件
                    file.SaveAs(full);
                    //返回路径，需要引用Newtonsoft.Json
                    context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject( new {  code = 1, data = pathSave + name }));
                }
                catch (Exception)
                { 
                    context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new {  code = -1, msg = "上传失败！" }));
                }
            }
    
            public bool IsReusable
            { 
                get
                { 
                    return false;
                }
            }
        }
    }

*  结果  
    ![在这里插入图片描述][20210707110218415.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]
 *  如果需要同时上传一些数据：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]: /images/20221005/57f26676228a47669d63994b5595eaa1.png
[20210707110218415.png]: /images/20221005/ac96b260bdf74bf69d0082c9e9bd2483.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]: /images/20221005/1e462b221af2438ca7499aee094f0c8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]: /images/20221005/56cdeac9f4b3404aa5d9097ffc1121b5.png