使用jquery插件ajaxfileupload一次上传多个文件，示例
@{
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一次上传多个文件，示例的更多相关文章
- PHP同时上传“多个”文件示例，并格式化$_FILES数组信息
方法1: 在html表单,放置多个文件选择框, 使用数组名作为组件的名字,如下: <form action="upload.php" method="post&qu ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- PHP+ajaxfileupload与jcrop插件结合 完成头像上传
昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- <<< commons-fileupload 和 ajaxfileupload 实现局部上传
最近弄了一个上传,要求实现页面的局部刷新,Java的上传组件大多还是用的 commons-fileupload,网上搜索了好多的教程,太麻烦了,看到了ajaxfileupload这个插件,不错,实现简 ...
随机推荐
- 虚拟机在NAT模式下主机与宿主机的ip配置
现有如下环境: 宿主机:win7 (IP为100.101.201.20) 虚拟机: SUSE LinuxEterprise 11 64bit (IP为100.101.201.23) 连接模式如下图: ...
- SSM框架搭建总结（2）
一.开发环境搭建 1.本地jdk安装及配置环境变量 2.本地tomcat安装 3.本地maven安装 3.1 maven安装 3.2 maven数据仓库配置settings.xml 4.本地安装SVN ...
- oracle11g-R2静默安装报错[INS-32013]解决方案
问题描述: oracle静默安装很强大...,参数搞不对.安装就扯dan了....这个报错搞了一个下午.终于搞定了如释负重.... 如果当初选择仅仅安装oracle软件就没多事情.想一步完成(数据库软 ...
- ArcGIS Desktop 10.1+ArcEngine10.1完全破解安装教程（含下载地址+亲测可用！）
最近在二次开发中用到了VS2010+ArcGIS的二次开发模式,因为之前的某些原因,对ArcGIS的接触甚少.初次安装也遇到了很多问题,这里做一个总结. 系统环境 win732位操作系统 需要文件 ( ...
- db_table--Spring Security3.1 最新配置实例
2011-04-28 这几天学习了一下Spring Security3.1,从官网下载了Spring Security3.1版本进行练习,经过多次尝试才摸清了其中的一些原理.本人不才,希望能帮助大家. ...
- Maven实战——常用Maven插件介绍
maven nexus 库已上传了第三方jar,但就是用mvn compile下不到本地 回答于 2013-06-04 14:40 你是通过何种方式上传到nexus的? 有给pom文件吗? 如果是单纯 ...
- linux shell 脚本攻略学习13--file命令详解,diff命令详解
一.file命令详解 find命令可以通过查看文件内容来找出特定类型的文件,在UNIX/ Linux系统中,文件类型并不是由文件扩展名来决定的(windows中却正是这么做的),file命令的目的是从 ...
- 使用 Cobbler 自动化和管理系统安装
设置一个网络环境可能涉及到许多步骤,才能为开始安装做好准备.您必须: 配置服务,比如 DHCP.TFTP.DNS.HTTP.FTP 和 NFS 在 DHCP 和 TFTP 配置文件中填入各个客户端机器 ...
- JAVA中线程池的简单使用
比如现在有10个线程,但每次只想运行3个线程,当这3个线程中的任何一个运行完后,第4个线程接着补上.这种情况可以使用线程池来解决,线程池用起来也相当的简单,不信,你看: package com.dem ...
- winetricks 用WineTricks令你的Wine更完整
Linux下最有名的Windows环境模拟器就是WINE了.它提供了一个可以模拟WINDOWS环境的基本平台,在这上面你几乎可以运行任何你想运行的windows程序. 什么?你不相信?不要告诉我你的程 ...