百度多文件异步上传控件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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
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
How do I change MySQL timezone?
2008/03/26 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
浅谈Python中的私有变量
2018/02/28 Python
python实现随机漫步算法
2018/08/27 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
2013年高中生自我评价
2013/10/23 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
项目计划书范文
2014/01/09 职场文书
八一演出活动方案
2014/02/03 职场文书
高中物理教学反思
2014/02/08 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
匿名检举信范文
2015/03/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android