文件上传---利用表单提交

上次我们介绍了插件上传文件的方法，配合我们的一般处理程序处理文件，很强大。介绍——》文件上传（插件版）

源码：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());