百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题，也不知道如何修复，之所以喜欢360浏览器是因为帮客户控制渲染内核：
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"/>
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"/>
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand"/>
要解决302问题也很简单，就是html5的文件上传，正好最近在ueditor里看到百度的webuploader，会自动选择flash html5，就是一个成熟的解决方案了。
先看前端，我们将最常用的操作封装为插件，asp.net中和MVC中最好使用相对于应用程序的绝对路径，自行定义全局applicationPath ：var applicationPath = "@(Href("~")=="/"?"":Href("~"))";
前端插件代码：
(function ($, window) {
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../..";
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function initWebUpload(item, options) {
if (!WebUploader.Uploader.support()) {
var error = "上传控件不支持您的浏览器！请尝试升级flash版本或者使用Chrome引擎的浏览器。<a target='_blank' href='http://se.360.cn'>下载页面</a>";
if (window.console) {
window.console.log(error);
}
$(item).text(error);
return;
}
var defaults = {
hiddenInputId: "uploadifyHiddenInputId", // input hidden id
onAllComplete: function (event) { }, // 当所有file都上传后执行的回调函数
onComplete: function (event) { },// 每上传一个file的回调函数
innerOptions: {},
fileNumLimit: undefined,
fileSizeLimit: undefined,
fileSingleSizeLimit: undefined,
PostbackHold: false
};
var opts = $.extend({}, defaults, options);
var hdFileData = $("#" + opts.hiddenInputId);
var target = $(item);//容器
var pickerid = "";
if (typeof guidGenerator36 != 'undefined')//给一个唯一ID
pickerid = guidGenerator36();
else
pickerid = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
var uploaderStrdiv = '<div class="webuploader">' +
'<div id="thelist" class="uploader-list"></div>' +
'<div class="btns">' +
'<div id="' + pickerid + '">选择文件</div>' +
//'<a id="ctlBtn" class="btn btn-default">开始上传</a>' +
'</div>' +
'</div>';
target.append(uploaderStrdiv);
var $list = target.find('#thelist'),
$btn = target.find('#ctlBtn'),//这个留着，以便随时切换是否要手动上传
state = 'pending',
uploader;
var jsonData = {
fileList: []
};
var webuploaderoptions = $.extend({
// swf文件路径
swf: applicationPath + '/Scripts/lib/webuploader/Uploader.swf',
// 文件接收服务端。
server: applicationPath + '/MvcPages/WebUploader/Process',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#' + pickerid,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
fileNumLimit: opts.fileNumLimit,
fileSizeLimit: opts.fileSizeLimit,
fileSingleSizeLimit: opts.fileSingleSizeLimit
},
opts.innerOptions);
var uploader = WebUploader.create(webuploaderoptions);
//回发时还原hiddenfiled的保持数据
var fileDataStr = hdFileData.val();
if (fileDataStr && opts.PostbackHold) {
jsonData = JSON.parse(fileDataStr);
$.each(jsonData.fileList, function (index, fileData) {
var newid = S4();
fileData.queueId = newid;
$list.append('<div id="' + newid + '" class="item">' +
'<div class="info">' + fileData.name + '</div>' +
'<div class="state">已上传</div>' +
'<div class="del"></div>' +
'</div>');
});
hdFileData.val(JSON.stringify(jsonData));
}
uploader.on('fileQueued', function (file) {//队列事件
$list.append('<div id="' + file.id + '" class="item">' +
'<div class="info">' + file.name + '</div>' +
'<div class="state">等待上传...</div>' +
'<div class="del"></div>' +
'</div>');
});
uploader.on('uploadProgress', function (file, percentage) {//进度条事件
var $li = target.find('#' + file.id),
$percent = $li.find('.progress .bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<span class="progress">' +
'<span class="percentage"><span class="text"></span>' +
'<span class="bar" role="progressbar" style="width: 0%">' +
'</span></span>' +
'</span>').appendTo($li).find('.bar');
}
$li.find('div.state').text('上传中');
$li.find(".text").text(Math.round(percentage * 100) + '%');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file, response) {//上传成功事件
target.find('#' + file.id).find('div.state').text('已上传');
var fileEvent = {
queueId: file.id,
name: file.name,
size: file.size,
type: file.type,
filePath: response.filePath
};
jsonData.fileList.push(fileEvent)
opts.onComplete(fileEvent);
});
uploader.on('uploadError', function (file) {
target.find('#' + file.id).find('div.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {//全部完成事件
target.find('#' + file.id).find('.progress').fadeOut();
var fp = $("#" + opts.hiddenInputId);
fp.val(JSON.stringify(jsonData));
opts.onAllComplete(jsonData.fileList);
});
uploader.on('fileQueued', function (file) {
uploader.upload();
});
uploader.on('filesQueued', function (file) {
uploader.upload();
});
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();
}
});
//删除
$list.on("click", ".del", function () {
var $ele = $(this);
var id = $ele.parent().attr("id");
var deletefile = {};
$.each(jsonData.fileList, function (index, item) {
if (item && item.queueId === id) {
uploader.removeFile(uploader.getFile(id));//不要遗漏
deletefile = jsonData.fileList.splice(index, 1)[0];
$("#" + opts.hiddenInputId).val(JSON.stringify(jsonData));
$.post(applicationi + "/Webploader/Delete", { 'filepathname': deletefile.filePath }, function (returndata) {
$ele.parent().remove();
});
return;
}
});
});
}
$.fn.powerWebUpload = function (options) {
var ele = this;
if (typeof PowerJs != 'undefined') {
$.lazyLoad(applicationPath + "/Scripts/lib/webuploader/webuploader.css", function () { }, 'css');
$.lazyLoad(applicationPath + "/Scripts/lib/webuploader/webuploader.min.js", function () {
initWebUpload(ele, options);
});
}
else {
initWebUpload(ele, options);
}
}
})(jQuery, window);
页面引入上述js后使用：
$("#uploader").powerWebUpload({ hiddenInputId: "uploadhidden" });
html端需要一个容器和hidden
<div id="uploader"></div>
<asp:HiddenField ID="hfFilePath" ClientIDMode="Static" runat="server" />
MVC版后端文件接收，即便你是asp.net 引入mvc做ajax也是可以的：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
public class WebUploaderController : BaseController
{
public ActionResult Process(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
{
string filePathName = string.Empty;string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload\\Document");
if (Request.Files.Count == )
{
return Json(new { jsonrpc = 2.0, error = new { code = , message = "保存失败" }, id = "id" });
}
try
{
filePathName = //自己在这里处理文件保存并返回需要保存到hidden的数据，文件在file或者Request.Files[0]
}
catch (Exception)
{
return Json(new { jsonrpc = 2.0, error = new { code = , message = "保存失败" }, id = "id" });
} return Json(new
{
jsonrpc = "2.0",
id = "id",
filePath = urlPath + "/" + filePathName
});
}
static string urlPath = "../../Upload/Document";
public ActionResult Delete(string filePathName)
{
if (string.IsNullOrEmpty(filePathName))
{
return Content("no");
}
//为了安全 检查一下路径 不够严谨 自行更具业务做更加细致的判断
if (!filePathName.StartsWith(urlPath) ||
filePathName.Substring(6, filePathName.Length - 7).Contains("../"))
{
return Content("no!");
}
string localFilePathName = this.Server.MapPath(filePathName); try
{
bool b = UploadifyManager.DeleteAttachment(localFilePathName);
if (!b) throw new Exception("删除文件失败"); return Content("ok");
}
catch
{
return Content("no");
}
}
}
----
一开始发首页被退下来了，现在重新编辑使内容更加完整，优化了插件代码
完整demo: http://yunpan.cn/cgifFwGhbGSvi 提取码 f7c1
https://github.com/gxrsprite/AspnetMvcWebuploaderDemo
补充：
扩展自定义参数，利用uploadBeforeSend事件可以扩展参数，插件内可根据需要修改。
cookie的问题，我用微软自带的登录系统，不需要做任何特殊处理完全没有问题。
百度 flash html5自切换 多文件异步上传控件webuploader基本用法的更多相关文章
- jquery文件上传控件 WebUploader
WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子: 这个样子是默认的效果. 这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...
- jquery文件批量上传控件Uploadify3.2(java springMVC)
人比較懒 有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/ -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分f ...
- 文件夹上传控件webupload插件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 文件的上传（表单上传和ajax文件异步上传）
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 普通文件的上传（表单上传和ajax文件异步上传）
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
随机推荐
- C语言 · 最大值与最小值计算
输入11个整数,计算它们的最大值和最小值. 样例输入 0 1 2 3 4 5 6 7 8 9 10 样例输出 10 0 #include<stdio.h> int main(){ ]; ...
- $.extend()的实现源码 --（源码学习1）
目标: $.extend({ add:function(a,b){ return a + b; } }) console.log($.a ...
- 【原】AFNetworking源码阅读（四）
[原]AFNetworking源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇还遗留了很多问题,包括AFURLSessionManagerTaskDe ...
- [C#] C# 知识回顾 - 异常介绍
异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...
- Html 制作相册
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
- sql 删除表中的重复记录
嗯,遇见了表中存在重复的记录的问题,直接写sql删除时最快的,才不要慢慢的复制到excel表中慢慢的人工找呢.哼. 如下sql,找出重复的记录,和重复记录中ID值最小的记录(表中ID为自增长) sel ...
- SymmetricDS 快速和灵活的数据库复制
开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...
- 数据库 DML、DDL、DCL区别 .
总体解释: DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...
- CentOS 7 安装出现 /dev/root does not exits 导致无法安装的问题
本人在官网下的是这个 CentOS-7-x86_64-DVD-1611.iso ,然后用UltraISO 9.6制作的U盘启动盘,不过在安装的时候出现了这个错误, 然后也是搜了好久,试了一下,下面这个 ...
- Linux目录结构