新金沙3777

【新金沙3777】同时又不摒弃主流IE浏览器,采用大文件分片并发上传

二月 11th, 2020  |  未分类

最近研究了下大文件上传的方法,找到了webuploader js
插件进行大文件上传,大家也可以参考这篇文章进行学习:《Web
Uploader文件上传插件使用详解》

文件上传是网站和 Web
应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题。

Web Uploader文件上传插件使用详解,uploader使用详解

WebUploader文件上传组件在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS
6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率。

新金沙3777 1

一、功能介绍

分片、并发

分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。

当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

预览、压缩

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。

解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。

多途径添加文件

支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。

粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT +
A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。

HTML5 & FLASH

兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。

同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。

MD5秒传

当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。

如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。

易扩展、可拆分

采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。

采用AMD规范组织代码,清晰明了,方便高级玩家扩展。

引入资源

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定,在后面将展示-->

二、文件上传
WebUploader只包含文件上传的底层实现,不包括UI部分。所以交互方面可以自由发挥,以下将演示如何去实现一个简单的版本。

Html部分
首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

<div id="uploader" class="wu-example">
 <!--用来存放文件信息-->
 <div id="thelist" class="uploader-list"></div>
 <div class="btns">
  <div id="picker">选择文件</div>
  <button id="ctlBtn" class="btn btn-default">开始上传</button>
 </div>
</div>

初始化Web Uploader 具体说明,请看一下代码中的注释部分。

var uploader = WebUploader.create({

 // swf文件路径
 swf: BASE_URL + '/js/Uploader.swf',

 // 文件接收服务端。
 server: 'http://webuploader.duapp.com/server/fileupload.php',

 // 选择文件的按钮。可选。
 // 内部根据当前运行是创建,可能是input元素,也可能是flash.
 pick: '#picker',

 // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
 resize: false
});

显示用户选择
由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。

// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
 $list.append( '<div id="' + file.id + '" class="item">' +
  '<h4 class="info">' + file.name + '</h4>' +
  '<p class="state">等待上传...</p>' +
 '</div>' );
});

文件上传进度
文件上传中,Web
Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传进度。

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
 var $li = $( '#'+file.id ),
  $percent = $li.find('.progress .progress-bar');

 // 避免重复创建
 if ( !$percent.length ) {
  $percent = $('<div class="progress progress-striped active">' +
   '<div class="progress-bar" role="progressbar" style="width: 0%">' +
   '</div>' +
  '</div>').appendTo( $li ).find('.progress-bar');
 }

 $li.find('p.state').text('上传中');

 $percent.css( 'width', percentage * 100 + '%' );
});

文件成功、失败处理 文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

uploader.on( 'uploadSuccess', function( file ) {
 $( '#'+file.id ).find('p.state').text('已上传');
});

uploader.on( 'uploadError', function( file ) {
 $( '#'+file.id ).find('p.state').text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
 $( '#'+file.id ).find('.progress').fadeOut();
});

三、图片上传
与普通文件上传相比,此demo演示了:文件过滤,图片预览,图片压缩上传等功能。

Html
要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

<!--dom结构部分-->
<div id="uploader-demo">
 <!--用来存放item-->
 <div id="fileList" class="uploader-list"></div>
 <div id="filePicker">选择图片</div>
</div>

Javascript
创建Web Uploader实例

// 初始化Web Uploader
var uploader = WebUploader.create({

 // 选完文件后,是否自动上传。
 auto: true,

 // swf文件路径
 swf: BASE_URL + '/js/Uploader.swf',

 // 文件接收服务端。
 server: 'http://webuploader.duapp.com/server/fileupload.php',

 // 选择文件的按钮。可选。
 // 内部根据当前运行是创建,可能是input元素,也可能是flash.
 pick: '#filePicker',

 // 只允许选择图片文件。
 accept: {
  title: 'Images',
  extensions: 'gif,jpg,jpeg,bmp,png',
  mimeTypes: 'image/*'
 }
});

监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。
PS: 这里得到的是Data
URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
 var $li = $(
   '<div id="' + file.id + '" class="file-item thumbnail">' +
    '<img>' +
    '<div class="info">' + file.name + '</div>' +
   '</div>'
   ),
  $img = $li.find('img');


 // $list为容器jQuery实例
 $list.append( $li );

 // 创建缩略图
 // 如果为非图片文件,可以不用调用此方法。
 // thumbnailWidth x thumbnailHeight 为 100 x 100
 uploader.makeThumb( file, function( error, src ) {
  if ( error ) {
   $img.replaceWith('不能预览');
   return;
  }

  $img.attr( 'src', src );
 }, thumbnailWidth, thumbnailHeight );
});

然后剩下的就是上传状态提示了,当文件上传过程中,
上传成功,上传失败,上传完成都分别对应uploadProgress,uploadSuccess,
uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
 var $li = $( '#'+file.id ),
  $percent = $li.find('.progress span');

 // 避免重复创建
 if ( !$percent.length ) {
  $percent = $('<p class="progress"></p>')
    .appendTo( $li )
    .find('span');
 }

 $percent.css( 'width', percentage * 100 + '%' );
});

// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
 $( '#'+file.id ).addClass('upload-state-done');
});

// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
 var $li = $( '#'+file.id ),
  $error = $li.find('div.error');

 // 避免重复创建
 if ( !$error.length ) {
  $error = $('<div class="error"></div>').appendTo( $li );
 }

 $error.text('上传失败');
});

// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
 $( '#'+file.id ).find('.progress').remove();
});

以上就是关于Web
Uploader文件上传插件使用方法介绍,希望对大家的学习有所帮助。

Uploader文件上传插件使用详解,uploader使用详解
WebUploader文件上传组件在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏…

使用

WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主,FLASH
为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5
的优势,同时又不摒弃主流IE浏览器,沿用原来的 FLASH 运行时,兼容
IE6+,iOS 6+, android
4+。采用大文件分片并发上传,极大的提高了文件上传效率。

使用webuploader分成简单直选要引入

参考百度官网进行学习借鉴,整理,具体内容如下

    选择文件 开始上传   

先来说一说WebUploader的特性

初始化Web Uploader

分片、并发

jQuery { $list = $, $btn = $, state = 'pending', uploader; uploader = WebUploader.create({ // 不压缩image resize: false, // swf文件路径 swf: 'uploader.swf', // 文件接收服务端。 server: upload.php, // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', chunked: true, chunkSize:2*1024*1024, auto: true, accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } });

分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。

upload.php处理

当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

以下是根据别人的例子自己拿来改的php 后台代码

具体就可以查看:jQuery webuploader分片上传大文件

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header; if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { exit; // finish preflight CORS requests here } if ( !empty ) { $random = rand(0, intval ); if  { header("HTTP/1.0 500 Internal Server Error"); exit; } } // header("HTTP/1.0 500 Internal Server Error"); // exit; // 5 minutes execution time @set_time_limit; // Uncomment this one to fake upload time // usleep; // Settings // $targetDir = ini_get . DIRECTORY_SEPARATOR . "plupload"; $targetDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material_tmp'; $uploadDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material'; $cleanupTargetDir = true; // Remove old files $maxFileAge = 5 * 3600; // Temp file age in seconds // Create target dir if (!file_exists { @mkdir; } // Create target dir if (!file_exists { @mkdir; } // Get a file name if (isset { $fileName = $_REQUEST["name"]; } elseif  { $fileName = $_FILES["file"]["name"]; } else { $fileName = uniqid; } $oldName = $fileName; $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName; // $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName; // Chunking might be enabled $chunk = isset ? intval : 0; $chunks = isset ? intval : 1; // Remove old temp files if  { if  || !$dir = opendir { die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}'); } while () !== false) { $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file; // If temp file is current file proceed to the next if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") { continue; } // Remove temp file if it is older than the max age and is not the current file if (preg_match$/', $file) && (@filemtime < time { @unlink; } } closedir; } // Open temp file if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'); } if  { if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) { die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}'); } // Read binary input stream and append it to temp file if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'); } } else { if (!$in = @fopen { die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'); } } while ($buff = fread { fwrite; } @fclose; rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part"); $index = 0; $done = true; for( $index = 0; $index < $chunks; $index++ ) { if ( !file_exists("{$filePath}_{$index}.part") ) { $done = false; break; } } if  { $pathInfo = pathinfo; $hashStr = substr(md5($pathInfo['basename']),8,16); $hashName = time() . $hashStr . '.' .$pathInfo['extension']; $uploadPath = $uploadDir . DIRECTORY_SEPARATOR .$hashName; if (!$out = @fopen { die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'); } if  ) { for( $index = 0; $index < $chunks; $index++ ) { if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) { break; } while ($buff = fread { fwrite; } @fclose; @unlink("{$filePath}_{$index}.part"); } flock; } @fclose; $response = [ 'success'=>true, 'oldName'=>$oldName, 'filePaht'=>$uploadPath, 'fileSize'=>$data['size'], 'fileSuffixes'=>$pathInfo['extension'], 'file_id'=>$data['id'], ]; die(json_encode; } // Return Success JSON-RPC response die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');

预览、压缩

更多关于PHP文件上传的精彩内容请关注专题《PHP文件上传操作汇总》,希望对大家有帮助。

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。

以上就是本文的全部内容,希望对大家的学习有所帮助。

解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。

多途径添加文件

支持文件多选,类型过滤,拖拽,图片粘贴功能。

粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ,
网页中右击图片点击复制),Ctrl + V便可添加此图片文件。

HTML5 & FLASH

兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。

同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。

MD5秒传

当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。

如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。

易扩展、可拆分

采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。

采用AMD规范组织代码,清晰明了,方便高级玩家扩展。

只有知道了WebUploader文件上传插件的特性,才能更充分的发挥其作用。

如何使用?

引入资源使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

1、文件上传

WebUploader只包含文件上传的底层实现,不包括UI部分,所以交互方面可以自由发挥。

Html部分

十大正规网赌网址 ,首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

    选择文件 开始上传 

初始化Web Uploader

具体说明,请看一下代码中的注释部分。

var uploader = WebUploader.create({ // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false});

显示用户选择由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。

// 当有文件被添加进队列的时候uploader.on( 'fileQueued', function { $list.append( '' + '' + file.name + '' + '等待上传...' + '' );});

文件上传进度

文件上传中,Web
Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传进度。

// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function { var $li = $, $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if  { $percent = $('' + '' + '' + '').appendTo.find; } $li.find.text; $percent.css( 'width', percentage * 100 + '%' );});

文件成功、失败处理

文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

uploader.on( 'uploadSuccess', function { $.find.text;uploader.on( 'uploadError', function { $.find.text;uploader.on( 'uploadComplete', function { $.find.fadeOut;

2、图片上传

新金沙3777 ,要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

   选择图片

【新金沙3777】同时又不摒弃主流IE浏览器,采用大文件分片并发上传。Javascript:

创建Web Uploader实例

// 初始化Web Uploadervar uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }});

监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。PS:
这里得到的是Data
URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候uploader.on( 'fileQueued', function { var $li = $( '' + '' + '' + file.name + '' + '' ), $img = $li.find; // $list为容器jQuery实例 $list.append; // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function { if  { $img.replaceWith; return; } $img.attr; }, thumbnailWidth, thumbnailHeight );});

然后剩下的就是上传状态提示了,当文件上传过程中,
上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess,
uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function { var $li = $, $percent = $li.find; // 避免重复创建 if  { $percent = $('') .appendTo; } $percent.css( 'width', percentage * 100 + '%' );});// 文件上传成功,给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function { $.addClass;});// 文件上传失败,显示上传出错。uploader.on( 'uploadError', function { var $li = $, $error = $li.find; // 避免重复创建 if  { $error = $.appendTo; } $error.text;

小案例:webuploader使用java如何实现上传?

    或将照片拖到这里,单次最多可选300张     0%      开始上传         

// 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选择图片' }, dnd: '#uploader .queueList', paste: document.body, accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // swf文件路径 [color=red]swf: '/static/js/webuploader/Uploader.swf',[/color] disableGlobalDnd: true, chunked: true, server: '/point/image/bulk.html', fileNumLimit: 300, fileSizeLimit: 50*1024*1024,//5M fileSingleSizeLimit: 5*1024*1024 //1M }); 

上传文件和普通的spring一样

@RequestMapping @ResponseBody public String bulk(HttpServletRequest request, MultipartFile file) { String path = super.uploadFile(request, "file", true); return "1"; } 

引用

Spring MVC3.2开始支持通过Servlet3.0实现文件上传

复制代码 代码如下:

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

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

相关文章

Your Comments

近期评论

    分类目录

    • 没有分类目录

    功能


    网站地图xml地图