百度多文件异步上传控件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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 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新手上路(八)
2006/10/09 PHP
php发送post请求函数分享
2014/03/06 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php验证码生成器
2017/05/24 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
一起深入理解js中的事件对象
2021/02/06 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
优秀士兵先进事迹
2014/02/06 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
团组织关系介绍信
2019/06/24 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js