jquery.form.js 实现异步上传

前台:

<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 });
        }
时间: 2024-10-06 14:25:52

jquery.form.js 实现异步上传的相关文章

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

jquery.form.js ajax提交上传文件

项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引入jquery和jquery.form.js        <script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script>    

[Asp.net mvc]jquery.form.js无刷新上传

写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jquery.form.js的插件实现. demo 首先通过nuget安装插件jquery.form.js 引入js文件 <script src="~/Scripts/jquery.form.min.js"></script> 前端调用的代码 @{ ViewBag.Titl

asp.net使用jquery.form实现图片异步上传

首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files.cnblogs.com/tianguook/jquery.form.js 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryForm

jquery.form.js使用AJAX上传文件

$("#fileUploadForm").ajaxSubmit({ url: "img.ashx", type: "post", success: function (data) { } }) url接受图片的地址 type:提交方式 Success ajax异步成功后返回数据 在fileUploadForm表单中包含 <input type="text" name="UserInfo" />

使用 jQuery FileUpload 插件实现异步上传

首先,先做两个提前准备工作  1.下载插件 2.向项目导入需要的css样式和js样式 下面,开始实现 使用 jQuery FileUpload 插件实现异步上传 <!- jsp 页面  以添加一个学生为例子 -!> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html P

ThinkPHP+JQuery实现文件的异步上传

前端代码 文件路径:application/index/view/index/index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ThinkPHP+JQuery实现文件的异步上传</title> </head> <body> <form id="a

异步上传文件(jquery.form)+进度条+上传到ftp服务器

最近写了一个小项目需要上传文件显示进度条到ftp,总结一下分享 我用的是jQuery.form.js上传 ftp服务器,自己百度去搭建很简单的 Talk is cheap.Show me your code.         GitHub上面的源码:https://github.com/Vinkong/learngit aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def

PHP JS JQ 异步上传并立即显示图片

http://my.oschina.net/zerodeng/blog/313773 提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > < title> Insert title here </title > < script type ="text/javascript" src= "jquery