百度多文件异步上传控件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 相关文章推荐
JQuery调用WebServices的方法和4个实例
May 06 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
JavaScript基础之this详解
Jun 04 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
非常经典的PHP文件上传类分享
2016/05/15 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python写的服务监控程序实例
2015/01/31 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python正则中最短匹配实现代码
2018/01/16 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python微信撤回监测代码
2019/04/29 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python新手学习标准库模块命名
2020/05/29 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
敬老院活动总结
2014/04/28 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
结婚典礼致辞
2015/07/28 职场文书
结婚十年感言
2015/07/31 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Python实现简单的猜单词
2021/06/15 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
Python正则表达式中flags参数的实例详解
2022/04/01 Python