使用webuploader上传文件

最新推荐文章于 2023-09-14 14:44:35 发布

纯纯要加油

最新推荐文章于 2023-09-14 14:44:35 发布

阅读量357

点赞数 1

文章标签： c#

本文链接：https://blog.csdn.net/qq_40422692/article/details/118542170

版权

准备工作：添加需要的文件和页面
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;
            }
        }
    }
}