文件上传的一些记录

首页 > 代码库 > 文件上传的一些记录

2024-10-24 20:21:02 207人阅读

1、js 上传插件 uploadify、uploadifive（h5版）

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://www.mamicode.com/plugins/uploadifive/uploadifive.css" rel="stylesheet" />
</head>
<body>
    <div id="js_logo"> 

    </div>
</body>
</html>

<script src="http://www.mamicode.com/plugins/jquery/jquery.js"></script>
<script src="http://www.mamicode.com/plugins/uploadifive/jquery.uploadifive.js"></script>
<script>
        $(function () {
            $(‘#js_logo‘).uploadifive({
                ‘buttonClass‘: ‘click‘,
                ‘buttonText‘: ‘上传图片‘,
                ‘buttonClass‘: ‘.btn btn-success‘,
                ‘fileType‘: ‘*.jpg, *.jpeg, *.png‘,
                ‘multi‘: false,
                ‘uploadScript‘: ‘http://localhost:2145/api/upload/handlerall‘,
                "onUploadComplete": function (file, data) {
                    alert(data.msg)
                }
            });
        })
</script>

2、后端简单处理代码

public ActionResult HandlerAll()
{
    HttpPostedFileBase file = Request.Files["Filedata"];
    string[] fileTypes = { ".png", ".jpg", ".jpeg", ".gif" };
    if (file != null)
    {
        string fileName = file.FileName;
        string ext = System.IO.Path.GetExtension(fileName).ToLower();
        //验证扩展名
        if (fileTypes.Contains(ext))
        {
            if ((file.ContentLength / (1024 * 1024)) <= 5)
            {
                string newFileName = Guid.NewGuid().ToString().Replace("-", "") + ext;

                string virtualPath = "/uploads";
                //保存到/images/logo
                string physicalPath = Server.MapPath(virtualPath);

                file.SaveAs(physicalPath + "/" + newFileName);

                return Json(new { code = 0, msg = "成功", data =http://www.mamicode.com/ newFileName });
            }
            return Json(new { code = 120000, msg = "单个文件5M以内" });
        }
        return Json(new { code = 120001, msg = "图片格式错误" });
    }
    return Json(new { code = 120002, msg = "fileObjName参数必须为Filedata" });
}

3、通常为方便多项目公用，会封装成图片服务器，支持跨域，需要增加一点配置，或者在代码中设置 response header

  <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,soapaction" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

4、web api 处理图片上传

/// <summary>
/// 测试，请上传gif图片
/// </summary>
[AcceptVerbs("OPTIONS", "POST")]
public async Task<HttpResponseMessage> HandlerAll()
{
    try
    {
        if (Request.Method == HttpMethod.Options)
        {
            return Request.CreateResponse(HttpStatusCode.Accepted);
        }

        if (!Request.Content.IsMimeMultipartContent())
        {

        }

        string savePath = HttpContext.Current.Server.MapPath("/uploads");

        var provider = new CustomMultipartFormDataStreamProvider(savePath);

        await Request.Content.ReadAsMultipartAsync(provider);

        List<string> fileNameList = new List<string>();

        foreach (MultipartFileData fileData in provider.FileData)
        {
            fileNameList.Add(fileData.LocalFileName);
        }

        HttpResponseMessage response = Request.CreateResponse<RESTfulModel>(HttpStatusCode.OK, new RESTfulModel() { Code = 0, Msg = "成功", Data = http://www.mamicode.com/string.Join(",", fileNameList) });

        //response.Headers.Add("Access-Control-Allow-Origin", "*");
        //response.Headers.Add("Access-Control-Allow-Methods", "OPTIONS,POST");
        //response.Headers.Add("Access-Control-Allow-Headers", "Content-Type,soapaction");

        return response;
    }
    catch (Exception ex)
    {
        return Request.CreateResponse(HttpStatusCode.InternalServerError);
    }
}

/// <summary>
/// 重命名上传的文件
/// </summary>
public class CustomMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
    public CustomMultipartFormDataStreamProvider(string rootPath) : base(rootPath)
    {

    }

    public override string GetLocalFileName(HttpContentHeaders headers)
    {
        //截取文件扩展名
        string ext = Path.GetExtension(headers.ContentDisposition.FileName.Trim(‘\"‘));
        string fileName = base.GetLocalFileName(headers).Replace("BodyPart_", "").Replace("-", "");
        return fileName + ext;
    }
}