ajax+ashx 完美实现input file上传文件

Posted 2020-07-23 Crazy Struggle

1、input file 样式不能满足需求

 <input type="file" value="浏览" />

IE8效果图：    Firefox效果图： Chrome效果图：  

2、input file上传按钮美化

css：    

.file{
   position: relative;
   background-color: #b32b1b;
   border: 1px solid #ddd;
   width: 68px;
   height: 25px;
   display: inline-block;
   text-decoration: none;
   text-indent: 0;
   line-height: 25px;
   font-size: 14px;
   color: #fff;
   margin: 0 auto;
   cursor: pointer;
   text-align: center;
   border: none;
   border-radius: 3px;         
}
.file input{
   position: absolute;
   top: 0;
   left: -2px;
   opacity: 0;
   width: 10px;
}

html：  

<div>
    <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly"/>
    <a class="file"><input id="btnfile" name="btnfile" type="file"/>浏览</a>
</div>

美化后的效果图：

 

3、ajax+ashx实现上传功能

引入文件：jquery-1.11.3.js  ajaxfileupload.js

 js:

 $(function () {
            //选择文件
            $(".file").on("change", "input[type=\'file\']", function () {
                var filePath = $(this).val();
                //设置上传文件类型
                if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
                    //上传文件
                    $.ajaxFileUpload({
                        url: \'ASHX/FileHandler.ashx\',
                        secureuri: false,
                        fileElementId: \'btnfile\',
                        dataType: \'json\',
                        success: function (data, status) {
                            //获取上传文件路径
                            $("#txt_filePath").val(data.filenewname);
                            alert("文件上传成功！");
                        },
                        error: function (data, status, e) {
                            alert(e);
                        }
                    });
                } else {
                    alert("请选择正确的文件格式！");
                    //清空上传路径
                    $("#txt_filePath").val("");
                    return false;
                }
            });
        })

FileHandler.ashx

public class FileHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string msg = string.Empty;
        string error = string.Empty;
        string result = string.Empty;
        string filePath = string.Empty;
        string fileNewName = string.Empty;
        //这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
        HttpFileCollection files = context.Request.Files;
        if (files.Count > 0)
        {
            //设置文件名
            fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
            //保存文件
            files[0].SaveAs(context.Server.MapPath("~/Upload/"+fileNewName));
            msg = "文件上传成功！";
            result = "{msg:\'" + msg + "\',filenewname:\'" + fileNewName + "\'}";
        }
        else
        {
            error = "文件上传失败！";
            result = "{ error:\'" + error + "\'}";
        }
        context.Response.Write(result);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

实现一个简单上传功能