百度多文件异步上传控件webuploader基本用法解析


Posted in Javascript onNovember 07, 2016

双核浏览器下在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 == 0)
   {
    return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
   }
   try
   {
    filePathName = //自己在这里处理文件保存并返回需要保存到hidden的数据,文件在file或者Request.Files[0]
   }
   catch (Exception)
   {
    return Json(new { jsonrpc = 2.0, error = new { code = 103, 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:  https://github.com/gxrsprite/AspnetMvcWebuploaderDemo

补充:

扩展自定义参数,利用uploadBeforeSend事件可以扩展参数,插件内可根据需要修改。

cookie的问题,我用微软自带的登录系统,不需要做任何特殊处理完全没有问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 #Javascript
You might like
解析htaccess伪静态的规则
2013/06/18 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
js 深拷贝函数
2008/12/04 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python递归函数实例讲解
2019/02/27 Python
深入了解Django中间件及其方法
2019/07/26 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
生日祝酒词大全
2015/08/10 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
浅谈Web Storage API的使用
2021/06/23 Javascript
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server