1. 程式人生 > >jquery.form.js 實現異步上傳

jquery.form.js 實現異步上傳

llb element eth document == ctype tostring detail new

前臺:

<form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data">
    <div class="form-horizontal">
        <div class="form-group" style="height:100px;overflow-y:auto">
            <div class="col-sm-8" id="filediv">
                <div><
input type="file" name="file" style="display: inline;" /><a href="javascript:void(0)" class="deletelink">刪除</a></div> <div><input type="file" name="file" style="display: inline;" /><a href="javascript:void(0)" class="deletelink">刪除</a></div>
<div><input type="file" name="file" style="display: inline;" /><a href="javascript:void(0)" class="deletelink">刪除</a></div> </div> </div> <div class="form-group"> <div class="col-sm-8"> <
button type="button" class="btn btn-success" style="float:left" id="addbtn">添加附件</button> <button type="submit" id="btnSubmit" style="float:right" class="btn btn-facebook">確定</button> </div> </div> </div> </form>

<script src="~/Scripts/jquery.form.js"></script>
<script>
    $(function () {
        $("#formSeacrh").submit(function () {
            var options = {
                //target: ‘#output‘,          //把服務器返回的內容放入id為output的元素中
                //beforeSubmit: showRequest,  //提交前的回調函數
                //url: url,                 //默認是form的action, 如果申明,則會覆蓋
                //clearForm: true,          //成功提交後,清除所有表單元素的值
                //resetForm: true,          //成功提交後,重置所有表單元素的值
                //timeout: 3000,            //限制請求的時間,當請求大於3秒後,跳出請求
                success: function (data) {
                    if (data.message == "") {
                        parent.addDetailToDiv(false, data.files);
                        $(parent.document.getElementsByClassName(‘close‘)).click();
                    } else {
                        $.growl.warning({ message: data.message, title: "提示" });
                    }
                },
                error: function (error) { alert(error); },
                url: ‘/ResumeInfo/uploadFile‘, /*設置post提交到的頁面*/
                type: "post", /*設置表單以post方法提交*/
                dataType: "json" /*設置返回值類型為文本*/
            }
            $(this).ajaxSubmit(options);
            return false;
        });

        $(‘body‘).on(‘click‘, ‘#addbtn‘, addFile);
        $(‘body‘).on(‘click‘, ‘.deletelink‘, deleteFile);
    });

    function addFile() {
        $(‘#filediv‘).append(‘<div><input type="file" name="file" style="display: inline;" /><a href="javascript:void(0)" class="deletelink">刪除</a></div>‘);
    }

    function deleteFile() {
        $(this).parent().remove();
    }
</script>

後臺:

        /// <summary>
        /// 上傳文件
        /// </summary>
        /// <returns></returns>
        public ActionResult uploadFile(string callback = "") {
            ViewBag.callback = callback;
            return View();
        }

        /// <summary>
        /// 上傳文件    提交
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult uploadFile(List<HttpPostedFileBase> list) {
            List<fileClass> fileNames = new List<fileClass>();
            var msg = "";
            if (Request.Files.Count == 0) {
                msg = "請選擇文件";
            } else {
                try {
                    for (int i = 0; i < Request.Files.Count; i++) {
                        if (Request.Files[i] != null) {
                            string ext = Path.GetExtension(Request.Files[i].FileName);
                            string filename = Guid.NewGuid().ToString() + ext;
                            string path = "/upload/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
                            string directory = Server.MapPath("~" + path);
                            if (!Directory.Exists(directory)) {
                                Directory.CreateDirectory(directory);
                            }
                            string fileFullName = Path.Combine(directory, filename);
                            Request.Files[i].SaveAs(fileFullName);
                            fileClass f = new fileClass();
                            f.filename = Request.Files[i].FileName;
                            f.path = path + filename;
                            fileNames.Add(f);
                        }
                    }
                } catch (Exception ex) {
                    msg = ex.Message;
                }
            }
            return Json(new { message = msg, files = fileNames });
        }

jquery.form.js 實現異步上傳