百度多文件异步上传控件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 相关文章推荐
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
js数组的操作指南
Dec 28 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
JSONP基础知识详解
Mar 19 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
3种vue组件的书写形式
Nov 29 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python并发和异步编程实例
2018/11/15 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python装饰器常见使用方法分析
2019/06/26 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python自动点赞功能的实现思路
2020/02/26 Python
python使用列表的最佳方案
2020/08/12 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
四年级小学生评语
2014/12/26 职场文书
高一作文之暖冬
2019/11/09 职场文书