文件/图片,批量上传【神器】--WebUploader

<system.web>

<httpRuntime maxRequestLength="102400" executionTimeout="720" />

</system.web>

 

pick: { id: ‘#picker‘,multiple:false }

上传大文件,有大小限制,分片就可以避免大小的问题。
进度条样式 bootstrap有

页面---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

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

<script src="webuploader/jquery-2.0.0.min.js" type="text/javascript"></script>

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

<style type="text/css">

/*【选择按钮样式,因为要用div所以实际都要设置一下css】*/

#picker

{

display: inline-block;

line-height: 1.428571429;

vertical-align: middle;

margin: 0 12px 0 0;

}

</style>

<script type="text/javascript">

$(function () {

setWebUploader();

setWebUploaderImg();

});

//文件上传

function setWebUploader() {

var $ = jQuery,

$list = $(‘#thelist‘),

$btn = $(‘#ctlBtn‘),

state = ‘pending‘,

uploader;

uploader = WebUploader.create({

// 不压缩image

resize: false,

// swf文件路径

swf: ‘webuploader/Uploader.swf‘,

// 文件接收服务端。

server: ‘dealUpload.aspx‘,

// 可接受文件类型

accept:{

extensions: ‘txt,docx,xlsx‘

},

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

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

pick: ‘#picker‘

});

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

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

$list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +

‘<h4 class="info">‘ + file.name + ‘</h4>‘ +

‘<p class="state">等待上传...</p>‘ +

‘</div>‘);

});

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

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

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

$percent = $li.find(‘.progress .progress-bar‘);

// 避免重复创建

if (!$percent.length) {

$percent = $(‘<div class="progress progress-striped active">‘ +

‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ +

‘</div>‘ +

‘</div>‘).appendTo($li).find(‘.progress-bar‘);

}

$li.find(‘p.state‘).text(‘上传中‘);

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

});

//【这些事件可以使用参数,res来获取从服务器】

uploader.on(‘uploadSuccess‘, function (file, res) {

var data =  res._raw;

if (data == "ok") {

$(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);

}

else {

$(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);

}

});

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

$(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错‘);

});

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

$(‘#‘ + file.id).find(‘.progress‘).fadeOut();

});

uploader.on(‘all‘, function (type) {

if (type === ‘startUpload‘) {

state = ‘uploading‘;

} else if (type === ‘stopUpload‘) {

state = ‘paused‘;

} else if (type === ‘uploadFinished‘) {

state = ‘done‘;

}

if (state === ‘uploading‘) {

$btn.text(‘暂停上传‘);

} else {

$btn.text(‘开始上传‘);

}

});

//点击【开始上传】触发的事件;

$btn.on(‘click‘, function () {

if (state === ‘uploading‘) {

uploader.stop();

} else {

//                    showCover();

uploader.upload();

}

});

} //End

//图片上传

function setWebUploaderImg() {

// 图片上传demo

var $ = jQuery,

$list = $(‘#fileList‘),

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

// 缩略图大小

thumbnailWidth = 100 * ratio,

thumbnailHeight = 100 * ratio,

// Web Uploader实例

uploader;

// 初始化Web Uploader

uploader = WebUploader.create({

// 自动上传。

auto: true,

// swf文件路径

swf: ‘webuploader/Uploader.swf‘,

// 文件接收服务端。

server: ‘dealUpload.aspx‘,

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

// 内部根据当前运行是创建,可能是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.append($li);

// 创建缩略图

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 * 100 + ‘%‘);

});

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

uploader.on(‘uploadSuccess‘, function (file, res) {

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

$(‘#‘ + file.id).append("<span>上传成功</span>");

});

// 文件上传失败,现实上传出错。

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();

});

}//End

function showCover() {

$("#cover").show();

}

</script>

</head>

<body>

<!--文件上传-->

<!--【选择文件按钮,最好用div,别用button{无效},js需要向这个选择文件按钮,append内容;】-->

<div id="picker">选择文件</div>

<!--【上传按钮】-->

<button id="ctlBtn">开始上传</button>

<!--【用来存放文件信息,蒙版效果,一批处理完毕清理{有些功能无效,比如fadeout,则通过这样的方式,结合手动的代码实现}】-->

<!--  <div id=‘cover‘ style=" position:fixed; top:0px;left:0px; width:100%; height:100%; opacity:0.3; z-index:50; display:none;"></div>-->

<div id="thelist" class="uploader-list" style=" z-index:100; position:absolute;left:100px;top:100px; "></div>

<br /><br />

<!--专门的炫的图片上传-->

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

<div id="uploader-demo">

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

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

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

</div>

</body>

</html>

后台--

protected void Page_Load(object sender, EventArgs e)

{

Upload();

}

private void Upload()

{

HttpFileCollection files = Request.Files;

if (files.Count == 0)

{

Response.Write("no1");

Response.End();

}

HttpPostedFile file = files[0];

string fileName = file.FileName;

string fileExt = Path.GetExtension(fileName);

string[] allowdEXT = { ".doc", ".xlsx", ".txt", ".gif",".jpg",".jpeg",".bmp",".png" };

if (!allowdEXT.Contains(fileExt))

{

Response.Write("no2");

Response.End();

}

//根据实际需求,1 把文件插入文件列表数据库,方便管理等  2 文件重名问题 3 按照年月日创建文件夹 。。。

string fileContainer = Request.MapPath("File");

file.SaveAs(fileContainer + "/" + fileName);

Response.Write("ok");

Response.End();

}

================mvc版本

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 模板</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="~/Tools/webuploader/webuploader.css" rel="stylesheet" />

<!-- 引入 Bootstrap -->

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

<script src="~/Scripts/jquery-2.0.0.min.js"></script>

<script src="~/Tools/webuploader/webuploader.js"></script>

<!-- 包括所有已编译的插件 -->

<script src="~/Tools/bootstrap3/js/bootstrap.min.js"></script>

<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

<!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

<style>

#picker {

display: inline-block;

line-height: 1.428571429;

vertical-align: middle;

margin: 0 12px 0 0;

}

</style>

<script>

// 文件上传

$(function () {

//子窗体调用父窗体方法;

$(document).click(function () {

window.parent.docclick();

});

setWebUploader();

setWebUploaderImg();

});

//文件上传

function setWebUploader() {

var $ = jQuery,

$list = $(‘#thelist‘),

$btn = $(‘#ctlBtn‘),

state = ‘pending‘,

uploader;

uploader = WebUploader.create({

// 不压缩image

resize: false,

//去重关闭

duplicate:true,

// swf文件路径

swf: ‘~/Tools/webuploader/Uploader.swf‘,

// 文件接收服务端。

server: ‘/tool/WebUploadFile‘,

// 可接受文件类型

accept: {

extensions: ‘txt,docx,xlsx‘

},

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

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

pick: ‘#picker‘

});

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

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

$("#thelist").show();

$list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +

‘<h4 class="info">‘ + file.name + ‘</h4>‘ +

‘<p class="state">等待上传...</p>‘ +

‘</div>‘);

});

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

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

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

$percent = $li.find(‘.progress .progress-bar‘);

// 避免重复创建

if (!$percent.length) {

$percent = $(‘<div class="progress progress-striped active">‘ +

‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ +

‘</div>‘ +

‘</div>‘).appendTo($li).find(‘.progress-bar‘);

}

$li.find(‘p.state‘).text(‘上传中‘);

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

});

//【这些事件可以使用参数,res来获取从服务器】

uploader.on(‘uploadSuccess‘, function (file, res) {

var data = res._raw;

if (data == "ok") {

$(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);

}

else {

$(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);

}

});

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

$(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错‘);

});

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

$(‘#‘ + file.id).find(‘.progress‘).fadeOut();

});

uploader.on(‘all‘, function (type) {

if (type === ‘startUpload‘) {

state = ‘uploading‘;

} else if (type === ‘stopUpload‘) {

state = ‘paused‘;

} else if (type === ‘uploadFinished‘) {

state = ‘done‘;

}

if (state === ‘uploading‘) {

$btn.text(‘暂停上传‘);

} else {

$btn.text(‘开始上传‘);

}

});

//点击【开始上传】触发的事件;

$btn.on(‘click‘, function () {

if (state === ‘uploading‘) {

uploader.stop();

} else {

uploader.upload();

}

});

$("#clobtn").on("click", function () {

uploader.reset();

});

} //End

//图片上传

function setWebUploaderImg() {

// 图片上传demo

var $ = jQuery,

$list = $(‘#fileList‘),

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

// 缩略图大小

thumbnailWidth = 100 * ratio,

thumbnailHeight = 100 * ratio,

// Web Uploader实例

uploader;

// 初始化Web Uploader

uploader = WebUploader.create({

// 自动上传。

auto: true,

//去重关闭

duplicate: true,

// swf文件路径

swf: ‘~/Tools/webuploader/Uploader.swf‘,

// 文件接收服务端。

server: ‘/tool/WebUploadFile‘,

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

// 内部根据当前运行是创建,可能是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.append($li);

// 创建缩略图

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 * 100 + ‘%‘);

});

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

uploader.on(‘uploadSuccess‘, function (file, res) {

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

$(‘#‘ + file.id).append("<span>上传成功</span>");

});

// 文件上传失败,现实上传出错。

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();

});

}//End

function closeDiv(a) {

if (a == "thelist") {

$("#" + a).hide();

$("#" + a).find(‘.item‘).remove();

}

}

</script>

</head>

<body>

<h1>webUploader批量上传神器</h1>

<h3>文件上传</h3>

<!--文件上传-->

<!--【选择文件按钮,最好用div,别用button{无效},js需要向这个选择文件按钮,append内容;】-->

<div id="picker">选择文件</div>

<!--【上传按钮】-->

<button id="ctlBtn" class="btn btn-default">开始上传</button>

<!--【用来存放文件信息,蒙版效果,一批处理完毕清理{有些功能无效,比如fadeout,则通过这样的方式,结合手动的代码实现}】-->

<div id="thelist" class="uploader-list" style=" z-index:100; position:absolute;left:0px;top:155px; border:1px solid gray;width:280px;height:300px;min-height:300px;display:none;">

<button id="clobtn" onclick="closeDiv(‘thelist‘)"  type="button" class="btn btn-primary" style="float:right;margin-top:0px;">关闭</button>

</div>

<br /><br />

<!--专门的炫的图片上传-->

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

<h3>图片上传</h3>

<div id="uploader-demo">

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

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

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

</div>

</body>

</html>

public ActionResult WebUploadFile()

{

string result = "";

HttpFileCollectionBase files = Request.Files;

if (files.Count == 0)

{

result = "no1";

}

HttpPostedFileBase file = files[0];

string fileName = file.FileName;

string fileExt = Path.GetExtension(fileName);

string[] allowdEXT = { ".doc", ".xlsx", ".txt", ".gif", ".jpg", ".jpeg", ".bmp", ".png" };

if (!allowdEXT.Contains(fileExt))

{

result = "no2";

}

//根据实际需求,1 把文件插入文件列表数据库,方便管理等  2 文件重名问题 3 按照年月日创建文件夹 。。。

string fileContainer = Request.MapPath("/Content/Files");

file.SaveAs(fileContainer + "/" + fileName);

return Content("ok");

}

=========================================文件分片,上传大文件。
   GUID = WebUploader.Base.guid(), //当前页面是生成的GUID作为标示  放 uploader;前面

chunked: true,//参数

formData: { guid: GUID },//参数

uploadSuccess事件,

//如果是分片上传的,需要进行【分片合并】

if (res.chunked) {

$.ajax({

url: "combin.ashx", //分片合并处理

type: "post",

data: { guid: GUID, fileExt: res.f_ext },

success: function (data) {

data = $.parseJSON(data);

if (data.hasError) {

alert(‘文件合并失败!‘);

} else {

alert(decodeURIComponent(data.savePath));

}

}

});

} else {

alert("上传成功。");

}

//后台

public class upFileDemo : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

context.Response.ContentType = "text/plain";

//如果进行了分片

if (context.Request.Form.AllKeys.Any(m => m == "chunk"))

{

//取得chunk和chunks

int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序(从0开始)

int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数

//根据GUID创建用该GUID命名的临时文件夹

string folder = context.Server.MapPath("/files/" + context.Request["guid"] + "/");

string path = folder + chunk;

//建立临时传输文件夹

if (!Directory.Exists(Path.GetDirectoryName(folder)))

{

Directory.CreateDirectory(folder);

}

FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);

BinaryWriter AddWriter = new BinaryWriter(addFile);

//获得上传的分片数据流

HttpPostedFile file = context.Request.Files[0];

Stream stream = file.InputStream;

BinaryReader TempReader = new BinaryReader(stream);

//将上传的分片追加到临时文件末尾

AddWriter.Write(TempReader.ReadBytes((int)stream.Length));

//关闭BinaryReader文件阅读器

TempReader.Close();

stream.Close();

AddWriter.Close();

addFile.Close();

TempReader.Dispose();

stream.Dispose();

AddWriter.Dispose();

addFile.Dispose();

context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"f_ext\" : \"" + Path.GetExtension(file.FileName) + "\"}");

}

else//没有分片直接保存

{

context.Request.Files[0].SaveAs(context.Server.MapPath("/files/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName)));

//  context.Response.Write("{\"chunked\" : false, \"hasError\" : false}");

context.Response.Write("ok");

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

//合并分片

public class combin : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string guid = context.Request["guid"];

string fileExt = context.Request["fileExt"];

string root = context.Server.MapPath("/files/");

string sourcePath = Path.Combine(root, guid + "/");//源数据文件夹

string targetPath = Path.Combine(root, Guid.NewGuid() + fileExt);//合并后的文件

DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);

string GetDirectoryName = Path.GetDirectoryName(sourcePath);

if (Directory.Exists(Path.GetDirectoryName(sourcePath)))

{

FileInfo[] files = dicInfo.GetFiles();

foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))

{

FileStream addFile = new FileStream(targetPath, FileMode.Append, FileAccess.Write);

BinaryWriter AddWriter = new BinaryWriter(addFile);

//获得上传的分片数据流

Stream stream = file.Open(FileMode.Open);

BinaryReader TempReader = new BinaryReader(stream);

//将上传的分片追加到临时文件末尾

AddWriter.Write(TempReader.ReadBytes((int)stream.Length));

//关闭BinaryReader文件阅读器

TempReader.Close();

stream.Close();

AddWriter.Close();

addFile.Close();

TempReader.Dispose();

stream.Dispose();

AddWriter.Dispose();

addFile.Dispose();

}

DeleteFolder(sourcePath);

context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"savePath\" :\"" + System.Web.HttpUtility.UrlEncode(targetPath) + "\"}");

//context.Response.Write("{\"hasError\" : false}");

}

else

{

context.Response.Write("{\"hasError\" : true}");

}

}

/// <summary>

/// 删除文件夹及其内容

/// </summary>

/// <param name="dir"></param>

private static void DeleteFolder(string strPath)

{

//删除这个目录下的所有子目录

if (Directory.GetDirectories(strPath).Length > 0)

{

foreach (string fl in Directory.GetDirectories(strPath))

{

Directory.Delete(fl, true);

}

}

//删除这个目录下的所有文件

if (Directory.GetFiles(strPath).Length > 0)

{

foreach (string f in Directory.GetFiles(strPath))

{

System.IO.File.Delete(f);

}

}

Directory.Delete(strPath, true);

}

public bool IsReusable

{

get

{

return false;

}

}

}

//========================

$(function () {

setWebUploader();

});

var Needend = false;

//文件上传

function setWebUploader() {

var $ = jQuery,

$list = $(‘#thelist‘),

$btn = $(‘#ctlBtn‘),

state = ‘pending‘,

GUID = WebUploader.Base.guid(), //当前页面是生成的GUID作为标示

uploader;

uploader = WebUploader.create({

// 不压缩image

resize: false,

// swf文件路径

swf: ‘webuploader/webuploader/Uploader.swf‘,

chunked: true,

fileNumLimit: 1,

threads: 1, //上传并发数

timeout: 0,

formData: { guid: GUID, keyword: $("#txtKeyWord").val(), sele_next: $("#sele_flie").val() },

// 文件接收服务端。

server: ‘Handler.ashx‘,

// 可接受文件类型

//                accept: {

//                    extensions: ‘txt,docx,xlsx‘

//                },

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

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

pick: ‘#picker‘

});

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

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

$list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +

‘<h4 class="info">‘ + file.name + ‘</h4>‘ +

‘<p class="state">等待上传...</p>‘ +

‘</div>‘);

});

//文件加入队列之前

uploader.on(‘beforeFileQueued‘, function (file) {

var limit = ‘<%=limitMark %>‘;

if (limit == "NeedLimit") {//如果需要进行限制

var leng = file.size;

if (leng > 52428800) {

alert("你所上传的文件大小大于了50兆,不能上传。");

return false;

}

}

return true;

});

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

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

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

$percent = $li.find(‘.progress .progress-bar‘);

// 避免重复创建

if (!$percent.length) {

$percent = $(‘<div class="progress progress-striped active">‘ +

‘<div class="progress-bar" role="progressbar" style="width: 0%;">‘ +

‘</div>‘ +

‘</div>‘).appendTo($li).find(‘.progress-bar‘);

}

$li.find(‘p.state‘).text(‘上传中‘);

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

});

//【这些事件可以使用参数,res来获取从服务器】

uploader.on(‘uploadSuccess‘, function (file, res) {

if (res.hasError) {

alert(res.reson);

$(‘#‘ + file.id).find(‘p.state‘).text(res.reson);

}

//如果是分片上传的,需要进行【分片合并】

if (res.chunked) {

$.ajax({

url: "combin.ashx", //分片合并处理

type: "post",

data: { guid: GUID, fileExt: res.f_ext, fileName: file.name, keyword: $("#txtKeyWord").val(), sele_next: $("#sele_flie").val() },

success: function (data) {

data = $.parseJSON(data);

if (data.hasError) {

alert(‘文件合并失败!‘);

} else {

$(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);

}

}

});

} else {

if (res.hasError) {

$(‘#‘ + file.id).find(‘p.state‘).text("失败!" + res.reason);

}

else {

$(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);

}

}

//                var data = res._raw;

//                if (data == "ok") {

//                    $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);

//                }

//                else {

//                    $(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);

//                }

});

uploader.on(‘uploadError‘, function (file, reason) {

$(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错,出错原因:‘+reason);

});

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

//            if ($btn.attr("disabled") == "disabled") {

//                Needend = true;

//            }

//            else {

//

//            }

//            alert(Needend);

//            $(‘#‘ + file.id).find(‘.progress‘).fadeOut();

});

uploader.on(‘all‘, function (type) {

if (type === ‘startUpload‘) {

state = ‘uploading‘;

}

else if (type === ‘stopUpload‘) {

state = ‘paused‘;

}

else if (type === ‘uploadFinished‘) {

state = ‘done‘;

//                $btn.removeAttr("disabled");

//                $("#muliTD").find("select").removeAttr("disabled");

//                $("#txtKeyWord").removeAttr("disabled");

window.location.href = "myDocument.aspx";

}

if (state === ‘uploading‘) {

$btn.attr("disabled", "disabled");

$("#muliTD").find("select").attr("disabled", "disabled");

$("#txtKeyWord").attr("disabled", "disabled");

}

});

//点击【开始上传】触发的事件;

$btn.on(‘click‘, function () {

if ($("#sele_flie").val() == "-1") {

alert("请选择目录");

return false; //不再执行,

}

if (state === ‘uploading‘) {

uploader.stop();

} else {

//                    showCover();

uploader.options.formData.keyword = $("#txtKeyWord").val();

var endSelfile = "";

var s = $("#muliTD").find("select");

$.each(s, function (c, d) {

if ($(d).val() == "-1") {

return false;

}

else {

endSelfile = $(d).val();

}

});

uploader.options.formData.sele_next = endSelfile;

uploader.upload();

}

});

} //End

时间: 2024-08-01 22:45:06

文件/图片,批量上传【神器】--WebUploader的相关文章

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.html 说明:Plupload支持多种浏览器,多种上传方式! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如 windows程序一样,一次选择多个文件进行批量上传.这样在某些应用上就显得很不人性化,有时候客户希

asp.net+swfupload 多图片批量上传(附源码下载)

asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教程所使用的flash上传文件是 swfupload,下面会有源码下载链接. 使用工具 vs 2010. 演示效果图 第一步 新建一个web项目 第二步 引入所需swfuplod文件(swfupload.swf,js,css等) 第三步 新建一个一般处理程序(upload.ashx) upload.a

KindEditor图片批量上传

KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONObject obj = new JSONObject(); obj.put("error", 0);//0:上传文件成功,1:上传文件失败 obj.put("url", "这里是图片路径,多张图采用英文逗号分隔“,”"); 代码示例: /** * 文件

[Plugin] WEB版一次选择多个文件进行批量上传(swfupload)的解决方案

URL:http://www.cnblogs.com/chillsrc/archive/2010/02/21/1670594.html 说明:功能完全支持ie和firefox浏览器! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如 windows程序一样,一次选择多个文件进行批量上传.这样在某些应用上就显得很不人性化,有时候客户希望能够一次选择很多文件,然后让系统把选择的文 件全部上传. 这里,就将针

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传

上一篇中,使用客户端jJSAjaxFileUploader插件实现单文件异步上传,本篇实现多文件异步上传. 本篇源码在github,先看效果: ● 上传文件显示进度条. ● 停止上传按钮和关闭缩略图按钮. ● 限制上传文件的类型. ● 限制上传文件的尺寸. ●同时上传多个文件成功后显示缩略图.文件名: ● 点击界面上的删除按钮,界面删除,同步删除文件夹中文件. ● 再点击上传文件,界面追加一行新的缩略图.文件名.删除按钮: □ HomeController 把上传的文件名改成以GUID命名的格式

多图片批量上传

零.  前言 网上多数图片批量上传代码老旧不全, 遂成次文, 以节省博友时间 一.  代码实例 前端代码(使用 HTML5 multiple属性来支持多图片批量上传): <form action="" enctype='multipart/form-data' method="post"> <div class="form-item"> <label>上传图片</label> <input t

将UEditor的图片批量上传抠出来单独使用

在Web项目中,经常有这样一个需求,就是对图片的批量上传,利用form表单的file可以实现图片的上传,但是用户体验不好,而且不支持ajax提交,网上也有很多图片上传插件,有基于javascript的,也有基于flash的,但是给我的感觉,要么用户体验不好,要么收费的,那么能不能有一个比较好的方案呢?那就是Ueditor! UEditor是百度出品的一款富文本编辑器,里面也集成了一个基于Flash的图片上传插件,由于Ueditor是开源的,所以源代码很容易得到,经过我的一番研究,找到了它的图片上

微擎ueditor编辑器图片批量上传顺序混乱的解决方法

上周六有客户反映刚上线的商城管理系统在商品详情页批量上传图片的时候出现图片显示顺序与上传顺序不一致的问题,经排查,发现是编辑器在上传时是按上传完成的顺序插入图片的,即先传完先显示,在网上查了一下,发现很多人都有遇到这个问题,初步认为是ueditor编辑器的bug,于是按照网上的方法去解决,但都没有解决问题,调试查找之后发现网上的解决方法根本不适合微擎的多图上传,因为涉及的文件都没有被调用....无奈只好自己查找,在和同事查找了将近一天之后终于找到了两个相关文件,然后又花了些功夫,最后总算是弄好了

百度编辑器 多图片批量上传 顺序混乱问题 ueditor

前言 ueditor的介绍我就不多说了,大家可直接访问 http://ueditor.baidu.com/website/index.html 正文 问题: ueditor在进行多图上传时,会出现图片书序错乱的问题. 原因: ueditor自从1.4.2版以后,前端上传模块统一改用webuploader,而webuploader是多线程上传的,ueditor对"uploadSuccess"的处理是上传成功一张,就加入到数组中,这样如果图片上传完成顺序是乱的,最终加入文本框的顺序也乱了.

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实例JS优化(配置优化,样式调整,名称+大小显示,错误处理等),后端代码.....) 效果:(完整demo:https://github.com/dunitian/LoTUploader/tree/V1.0/Demo) 一句代码:$.lotuploader('lot-uploader', '/Home/Upload'); //必填参数:ID