@{

    ViewBag.Title = "Index";

    Layout = "";

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <script src="/jquery-1.7.1.js" type="text/javascript"></script>

    <script src="/ajaxfileupload.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //$(":button").click(function () {

            //    if ($("#file1").val().length > 0) {

            //        ajaxFileUpload();

            //    }

            //    else {

            //        alert("请选择图片");

            //    }

            //})

            bindFileChange();

        })

        function bindFileChange()

        {

            $("#file1").change(function () {

                if ($("#file1").val().length > ) {

                    ajaxFileUpload();

                }

            });

        }

        function showUploadImgs(data)

        {

            if(data.imgList)

            {

                $("#dvUploadImgs").empty();

                for(var i in data.imgList)

                {

                    $("#dvUploadImgs").append("<br/><span>" + data.nameList[i] + "</span><br/>");

                    if (/.(jpg|jpeg|png|gif|bmp)$/.test(data.nameList[i].toLowerCase()))

                    {

                        $("#dvUploadImgs").append("<img id='Img" + i + "' width='500px' src='" + data.imgList[i] + "' /><br/>");

                    }

                }

            }

        }

        function ajaxFileUpload() {

            $.ajaxFileUpload

            (

                {

                    url: '/Home/Upload', //用于文件上传的服务器端请求地址

                    type: 'post',

                    data: { Id: '', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行

                    secureuri: false, //一般设置为false

                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />

                    dataType: 'json', //返回值类型 一般设置为json

                    //async: false,

                    success: function (data, status)  //服务器成功响应处理函数

                    {

                        showUploadImgs(data);

                        if (typeof (data.error) != 'undefined') {

                            if (data.error != '') {

                                alert(data.error);

                            } else {

                                alert(data.msg);

                            }

                        }

                        //由于ajaxFileUpload把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下

                        bindFileChange();

                    },

                    error: function (data, status, e)//服务器响应失败处理函数

                    {

                        alert(e);

                    }

                }

            )

            return false;

        }

        function checkFile(fileName) { //自己添加的文件后缀名的验证

            return /.(jpg|png|gif|bmp|pdf|doc|docx)$/.test(fileName) ? true : (function () {

                alert('文件格式仅支持jpg|png|gif|bmp|pdf|doc|docx格式！');

                return false;

            })();

        }

    </script>

</head>

<body>

    <p><input type="file" id="file1" name="file" multiple="multiple" accept="image/gif, image/jpeg, image/jpg, image/png, *.pdf"/></p>

    @*<input type="button" value="上传" />*@

    @*<p><img id="img1" alt="上传成功啦" src="" /></p>*@

    <div id="dvUploadImgs">

    </div>

</body>

</html>
public ActionResult Upload()

        {

            NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

            string imgPath = "";

            List<string> imgList = new List<string>();

            List<string> nameList = new List<string>();

            if (hfc.Count > )

            {

                int i = ;

                while(i<hfc.Count)

                {

                    imgPath = "/FileUpload/mytest_" + hfc[i].FileName;

                    string PhysicalPath = Server.MapPath(imgPath);

                    hfc[i].SaveAs(PhysicalPath);

                    nameList.Add(hfc[i].FileName);

                    imgList.Add(imgPath);

                    i += ;

                }

            }

            //注意要写好后面的第二第三个参数

            return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), nameList = nameList, imgList = imgList }, "text/html", JsonRequestBehavior.AllowGet);

        }
//也可以使用百度的插件webuploader.js，前端不同，后端和上面的一样，示例如下：

@{

    ViewBag.Title = "Index";

    Layout = "";

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <script src="/jquery-1.7.1.js" type="text/javascript"></script>

    <script src="/webuploader.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="/webuploader.css">

    <script type="text/javascript">

        $(function () {

            // 初始化Web Uploader

            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。

                auto: true,

                // swf文件路径

                swf: '/Uploader.swf',

                // 文件接收服务端。

                server: '/Home/Upload',

                // 选择文件的按钮。可选。

                // 内部根据当前运行是创建，可能是input元素，也可能是flash.

                pick: '#filePicker',

                // 只允许选择图片文件。

                accept: {

                    title: 'Images',

                    extensions: 'gif,jpg,jpeg,bmp,png',

                    mimeTypes: 'image/*'

                }

            });

            // 当有文件添加进来的时候

            uploader.on('fileQueued', function (file) {

                var $li = $(

                        '<div id="' + file.id + '" class="file-item thumbnail">' +

                            '<img>' +

                            '<div class="info">' + file.name + '</div>' +

                        '</div>'

                        ),

                    $img = $li.find('img');

                // $list为容器jQuery实例

                var $list = $("#fileList");

                $list.append($li);

                // 创建缩略图

                // 如果为非图片文件，可以不用调用此方法。

                // thumbnailWidth x thumbnailHeight 为 100 x 100

                var thumbnailWidth = ;

                var thumbnailHeight = ;

                uploader.makeThumb(file, function (error, src) {

                    if (error) {

                        $img.replaceWith('<span>不能预览</span>');

                        return;

                    }

                    $img.attr('src', src);

                }, thumbnailWidth, thumbnailHeight);

            });

            // 文件上传过程中创建进度条实时显示。

            uploader.on('uploadProgress', function (file, percentage) {

                var $li = $('#' + file.id),

                    $percent = $li.find('.progress span');

                // 避免重复创建

                if (!$percent.length) {

                    $percent = $('<p class="progress"><span></span></p>')

                            .appendTo($li)

                            .find('span');

                }

                $percent.css('width', percentage *  + '%');

            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。

            uploader.on('uploadSuccess', function (file) {

                $('#' + file.id).addClass('upload-state-done');

            });

            // 文件上传失败，显示上传出错。

            uploader.on('uploadError', function (file) {

                var $li = $('#' + file.id),

                    $error = $li.find('div.error');

                // 避免重复创建

                if (!$error.length) {

                    $error = $('<div class="error"></div>').appendTo($li);

                }

                $error.text('上传失败');

            });

            // 完成上传完了，成功或者失败，先删除进度条。

            uploader.on('uploadComplete', function (file) {

                $('#' + file.id).find('.progress').remove();

            });

        });

    </script>

</head>

<body>

    <!--dom结构部分-->

    <div id="uploader-demo">

        <!--用来存放item-->

        <div id="fileList" class="uploader-list"></div>

        <div id="filePicker">选择图片</div>

    </div>

</body>

</html>




												


											
使用jquery插件ajaxfileupload一次上传多个文件，示例的更多相关文章
	

    
								
  1. PHP同时上传“多个”文件示例，并格式化$_FILES数组信息
		
    方法1: 在html表单,放置多个文件选择框, 使用数组名作为组件的名字,如下: <form action="upload.php" method="post&qu ...
    
		
    2. 
						
  2. 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
		
    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
    
		
    3. 
						
  3. jQuery插件AjaxFileUpload实现ajax文件上传
		
    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
    
		
    4. 
						
  4. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
		
     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
    
		
    5. 
						
  5. JQuery插件ajaxFileUpload 异步上传文件（PHP版）
		
    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
    
		
    6. 
						
  6. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
		
    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
    
		
    7. 
						
  7. PHP+ajaxfileupload与jcrop插件结合 完成头像上传
		
    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果
    
		
    8. 
						
  8. jQuery AJAX 网页无刷新上传示例
		
    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
    
		
    9. 
						
  9. <<< commons-fileupload 和 ajaxfileupload 实现局部上传
		
    最近弄了一个上传,要求实现页面的局部刷新,Java的上传组件大多还是用的 commons-fileupload,网上搜索了好多的教程,太麻烦了,看到了ajaxfileupload这个插件,不错,实现简 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【BI】商务智能
			
    BI的定义 商务智能BI (Business Intellignece) 商务智能是涵盖性术语,包含框架.工具.数据库.分析工具.应用和方法.商务智能的主要目标是实现数据的交互,实现对数据的操作,供管 ...
    
			
    2. 
						
  2. java 怎么打印变量
			
    //Test.java public class Test16{ public static void main(String args[]){ int age=28; System.out.prin ...
    
			
    3. 
						
  3. 在xpage上怎么用jdbc去连接sql server呀
			
    你去http://www.openntf.org/Internal/home.nsf 下載以下對應版本最新控件 XPages Extension Library 這裏面已經包括OSGI功能 OSGI在 ...
    
			
    4. 
						
  4. ssh无法登录,提示Pseudo-terminal will not be allocated because stdin is not a terminal.
			
    当远程通过ssh登录主机时出现Pseudo-terminal will not be allocated because stdin is not a terminal. 错误   字面意思是伪终端将 ...
    
			
    5. 
						
  5. Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener. ...nested exception is java.lang.NoSuchMethodError:
			
    ssh 中,项目部署到服务器的时候,出现这样的奇葩的事情: 21-Oct-2017 11:27:15.953 INFO [localhost-startStop-1] org.apache.catal ...
    
			
    6. 
						
  6. android webview goback 跳过页面302自动跳转方法
			
    转自http://blog.csdn.net/dyllove98/article/details/8827529 http://hi.baidu.com/519177819/item/3a340f16 ...
    
			
    7. 
						
  7. nginx常用超时设置
			
    客户度连接nginx超时, 建议5s内 接收客户端header超时, 默认60s, 如果60s内没有收到完整的http包头, 返回408 Syntax: client_header_timeout t ...
    
			
    8. 
						
  8. 向大家介绍15个漂亮的Ubuntu GDM主题
			
    没事向大家介绍几个Ubuntu GDM主题,希望大家喜欢,这些Ubuntu GDM主题是我找了很久的…… "GNOME Display Manager允许用户轻松的设定登录界面主题.网上有大 ...
    
			
    9. 
						
  9. [转]图解分布式一致性协议Paxos
			
    Paxos协议/算法是分布式系统中比较重要的协议,它有多重要呢? <分布式系统的事务处理>: Google Chubby的作者MikeBurrows说过这个世界上只有一种一致性算法,那就是 ...
    
			
    10. 
						
  10. java节假日api--关于节假日想到的
			
    http://goseek.cn/index.php. 跟一园友讨论节假日问题得之一网址...涨姿势...(仅限中国节假日) http://api.goseek.cn/ 另一网友整理了测试类: htt ...
    
			
    11.