文件上傳---利用表單提交

上次我們介紹了插件上傳文件的方法，配合我們的一般處理程序處理文件，很強大。介紹——》文件上傳（插件版）

源碼：https://github.com/SeaLee02/FunctionModule     UploadFiles/WebDemo/UpControl2/UploadDemo.aspx   源碼

ListJson  DLL文件和JS：點擊下載

這次我們介紹我們利用ASP.NET里面頁面自帶的form表單來上傳文件

頁面：

前台頁面

需要在form里面添加一個屬性，沒有的話就不能上傳別的格式

 

  <div class="group">
            <label class="title">上傳</label>
            <div class="controls ">
                <ul class="filebox">
                    <li class="txtfilename">
                       <asp:TextBox runat="server" ID="txtTypeImg" CssClass="input02"></asp:TextBox>
                    </li>
                    <li class="btnfilea"><a href="javascript:void(0)" onclick="btnfileaclick($(this))" class="btnfilebtn">上傳圖片</a>
                    </li>
                    <li class="fileinput">
                        <input type="file" name="fileuploadico" id="fileuploadico" onchange="fileonchange($(this),'myfrom')" />
                    </li>
                </ul>
            </div>
        </div>
        <script src="../JS/jquery-1.11.0.min.js"></script>
        <script src="../JS/UpControl2/jquery.form.min.js"></script>  <%--form表單提交，不能少--%>
        <script src="../JS/UpControl2/jquery.leadinupload.js"></script> <%--腳本處理 --%>

然后就沒有了，似乎看起來很簡單。

我們來理解理解樣式，

我們點擊上傳圖片的時候會觸發 btnfileaclick($(this))  ，這個方法，我們封裝在最后一個js文件里面了。

我們來看看最后一個js文件

//當我點擊上傳的時候，這個事件觸發，然后主動讓下面的事件發生
var btnfileaclick = function ($this) {

    $this.parent().siblings(".fileinput").find("input[type=file]").click();

}


var fileonchange = function ($this,formId) {

    var fileid = $this.attr("id"); //文件上傳ID
    var txtid = $this.parent().siblings(".txtfilename").find("input[type=text]").attr("id"); //路徑ID
    //formId是form的Id   ajaxSubmit的前提需要引用jquery.form.min.js
    $("#" + formId).ajaxSubmit({
        beforeSubmit: function (formData, jqForm, options) {
        },
          uploadProgress: function (event, position, total, percentComplete) {   //顯示進度的

           //console.log("pos：" + position + ",total:" + total + ",percebt:" + percentComplete);       //position：當前傳了多少，total：中共的大小，percentComplete :百分比
            },success: function (data) {

 $("#" + data.txtName).val(data.filePath); //文本框賦值 data有id和value  }, error: function (data, status, e) { alert("上傳失敗"); }, url: "/Tools/Update.ashx", type: "post", //post提交  data: { fileid: fileid, txtid: txtid }, dataType: "json", timeout: 60000 }); }

所以我們就得去看我們的Tools/Update.ashx了

 

   context.Response.ContentType = "text/plain";
            //post提交
            string fileid = context.Request["fileid"].ToString();//上傳控件ID
            string txtid = context.Request["txtid"].ToString();//文本框ID

            HttpPostedFile file = context.Request.Files[fileid]; //得到上傳文件
            string uploadpath = HttpContext.Current.Server.MapPath("/UplaodFileds/");//絕對路徑

            //獲取擴展名  只有知道完全路徑才能用Path來獲取
            string fileExtension = System.IO.Path.GetExtension(file.FileName);
            string _NewFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExtension;//新名字

            string _Folder = DateTime.Now.ToString("yyyyMMdd");//文件夾
            string _NewPath = uploadpath + _Folder + "\\";
            if (file != null)
            {
                if (!Directory.Exists(_NewPath)) //判斷文件夾是否存在 不在就創建一個
                {
                    Directory.CreateDirectory(_NewPath);
                }
                file.SaveAs(_NewPath + _NewFileName); //保存
            }
             
            JsonData data = new JsonData();  //數據轉型  需要引用ListJson

            data["txtName"] = txtid;
            data["filePath"] = "/UplaodFileds/" + _Folder + "/" + _NewFileName;

            // 如果不想調用上面的類就返回一個字符串格式的Json數據
            // "{\"txtName\": \"" + txtid + "\", \"filePath\": \"" + "/UplaodFileds/" + _Folder + "/" + _NewFileName + "\"}"


            //返回json格式 txtName:"文本框ID",filePath:"上傳文件的路徑"
            
            context.Response.Write(data.ToJson());