[JS]实现文件上传（二）

1.CSS & JS

  <script src="uploadFiles/asset/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="uploadFiles/asset/ajaxfileupload.js" type="text/javascript"></script>
<style type="text/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: 100px;
}
</style>
<title>UPloadTest</title> 
<script type="text/javascript">
    function changeB() {
        var btnfileVal = $("#btnfile").val();
        var btnfileVal2 = btnfileVal.replace('C:\\fakepath\\', '');
        $("#txt_filePath").val(btnfileVal2);
    }
    function OKButtonOnClick() {
        var filePath = $("#btnfile").val();
        //设置上传文件类型
        if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1 || filePath.indexOf("doc") != -1 || filePath.indexOf("docx") != -1
        || filePath.indexOf("ppt") != -1 || filePath.indexOf("pptx") != -1 || filePath.indexOf("txt") != -1 || filePath.indexOf("jnt") != -1
        || filePath.indexOf("png") != -1 || filePath.indexOf("jpg") != -1 || filePath.indexOf("gif") != -1 || filePath.indexOf("jpeg") != -1 
        || filePath.indexOf("bmp") != -1
        ) {
                //上传文件
                $.ajaxFileUpload({
                    url: 'uploadFileHandler.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;
            }
    };
</script>

--------------------------------------------------------------------------------------------

2.页面

<form id="form1" runat="server">
    <div>
        <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly"/>
        <a class="file"><input id="btnfile" name="btnfile" type="file" onchange="changeB()" />浏览</a>
        <input id="OKButton" name="OKButton" type="button" value="button" onclick="OKButtonOnClick()" />
    </div>
</form>

-------------------------------------------------------------------------------------------------

3.ashx

  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("uploadFiles/" + fileNewName));
            msg = "文件上传成功！";
            result = "{msg:'" + msg + "',filenewname:'" + fileNewName + "'}";
        }
        else
        {
            error = "文件上传失败！";
            result = "{ error:'" + error + "'}";
        }
        context.Response.Write(result);
        context.Response.End();
    }