jQuery 파일 업로드 제어 Uploadify 분석

이 글은 주로 jQuery 파일 업로드 컨트롤 Uploadify의 사용법을 소개합니다. 원저자가 매우 자세하게 설명했습니다.

jquery 기반 파일 업로드 제어, ajax 비새로고침 업로드 지원, 동시에 여러 파일 업로드, 업로드 진행률 표시 및 업로드된 파일 삭제.

jquery1.4 이상, Flash Player 9.0.24 이상이 필요합니다.

플래시를 사용하는 버전과 html5를 사용하는 버전 두 가지가 있습니다. HTML5는 결제가 필요하므로 여기서는 플래시 버전의 사용법에 대해서만 이야기하겠습니다.

공식 웹사이트: http://www.uploadify.com/

컨트롤 스크린샷:

사용법:

먼저 다음 파일을 인용하세요

<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" ></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>

파일 입력 또는 기타 요소를 생성하세요 ID를 사용하여 Uploadify를 초기화합니다. (디렉토리에 uploadify.swf 파일과 uploadify.php 배경 파일이 있어야 합니다. 경로는 프로젝트의 디렉토리 구조를 기반으로 합니다.)

<input type="file" name="file_upload" id="file_upload" />
<script>
　$(function(){
 　　 $(&#39;#file_upload&#39;).uploadify({
  　　 &#39;swf&#39;  :&#39;uploadify.swf&#39;,
  　　　 &#39;uploader&#39;:&#39;uploadify.php&#39;
  　　 // Put your options here
 　　　});
　　　});
</script>

이런 식으로, 가장 기본적인 업로드 구조가 완성되었습니다. 기본 원칙은 DOM 구조를 생성하기 위해 생성한 파일 입력을 변경하고, p 버튼을 만들고, uploadify.css 파일의 .uploadify-button에서 버튼 스타일을 수정하고, swf 파일을 버튼 위에 배치하는 것입니다. 버튼을 클릭하면 실제로 클릭은 swf

Options:

$('#file_upload').uploadify({
 auto:false, 
 //接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置auto时默认为true
 buttonClass: "some-class", 
 //设置上传按钮的class
 buttonCursor: 'hand',
 //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
 buttonImage: 'img/browse-btn.png', 
 //设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面。
 buttonText: &#39;<p>选择文件</p>&#39;,
 //设置按钮文字。值会被当作html渲染，所以也可以包含html标签
 checkExisting: &#39;/uploadify/check-exists.php&#39;,
 //接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
 debug: false,
 //开启或关闭debug模式
 fileObjName:&#39;filedata&#39;,
 //设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为&#39;the_files&#39;,你可以使用$_FILES[&#39;the_files&#39;]存取这个已经上传的文件。
 fileSizeLimit:&#39;100MB&#39;,
 //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制
 fileTypeExts: &#39;*.*&#39;,
 //设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开(&#39;*.jpg;*.png;*.gif&#39;)
 fileTypeDesc: &#39;All Files&#39;,
 //可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为&#39;自定义文件&#39;,ie and firefox下可显示描述）
 formData: {
  timestamp: &#39;<?php echo $timestamp;?>&#39;,
  token: &#39;<?php echo md5(&#39;unique_salt&#39; . $timestamp);?>&#39;
 },
 //通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/
 height: 30,
 //设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
 width: 120,
 //设置按钮宽度(单位px)，默认120
 itemTemplate:false,
 //模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/
 method:&#39;post&#39;,
 //提交上传文件的方法，接受post或get两个值，默认为post
 multi: false,
 //设置是否允许一次选择多个文件，true为允许，false不允许
 overrideEvents: [],
 //重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
 preventCaching:true,
 //是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
 progressData: &#39;percentage&#39;,
 //设置文件上传时显示数据，有‘percentage&#39; or ‘speed&#39;两个参数(百分比和速度)
 queueID: false,
 //设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
 queueSizeLimit: 999,
 //设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量（那是uploadLimit）.如果增加进队列中的文件数量超出这个值，将会触发onSelectError事件。默认值为999
 removeCompleted: true,
 //是否移除掉队列中已经完成上传的文件。false为不移除
 removeTimeout: 3,
 //设置上传完成后删除掉文件的延迟时间，默认为3秒。如果removeCompleted为false的话，就没意义了
 requeueErrors: false,
 //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
 successTimeout: 30,
 //设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒
 swf: &#39;uploadify.swf&#39;,
 //swf的相对路径，必写项
 uploader: &#39;uploadify.php&#39;
 //服务器端脚本文件路径，必写项
 uploadLimit: 999
 //上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999
})

Events:

$('#file_upload').uploadify({ 
 onCancel: function(file){
   console.log('The file'+ file.name + 'was cancelled.')
 },
 //文件被移除出队列时触发,返回file参数
 onClearQueue: function(queueItemCount){
  console.log(queueItemCount+'file(s) were removed frome the queue')
 },
 //当调用cancel方法且传入'*'这个参数的时候触发，其实就是移除掉整个队列里的文件时触发，上面有说cancel方法带*时取消整个上传队列
 onDestroy: function(){
  //调用destroy方法的时候触发
 },
 onDialogClose: function(queueData){
  console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
 },
 //关闭掉浏览文件对话框时触发。返回queueDate参数，有以下属性：
 /*
  filesSelected 浏览文件对话框中选取的文件数量
  filesQueued 加入上传队列的文件数
  filesReplaced 被替换的文件个数
  filesCancelled 取消掉即将加入队列中的文件个数
  filesErrored 返回错误的文件个数
 */
 onDialogOpen:function(){
  //打开选择文件对话框时触发
 },
 onDisable:function(){
  //禁用uploadify时触发(通过disable方法)
 },
 onEnalbe: function(){
  //启用uploadify时触发(通过disable方法)
 },
 onFallback:function(){
  //在初始化时检测不到浏览器有兼容性的flash版本时实触发
 },
 onInit: function(instance){
  console.log('The queue ID is'+ instance.settings.queueID)
 },
 //每次初始化一个队列时触发，返回uploadify对象的实例
 onQueueComplete:function(queueData){
  console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
 },
 //队列中的文件都上传完后触发，返回queueDate参数，有以下属性：
 /*
  uploadsSuccessful 成功上传的文件数量
  uploadsErrored 出现错误的文件数量
 */
 onSelect: function(file){
  console.log(file.name)
 },
 //选择每个文件增加进队列时触发，返回file参数
 onSelectError: function(file,errorCode,errorMsg){
  console.log(errorCode)
  console.log(this.queueData.errorMsg)
 },
 //选择文件出错时触发，返回file,erroCode,errorMsg三个参数
 /*
  errorCode是一个包含了错误码的js对象，用来查看事件中发送的错误码，以确定错误的具体类型，可能会有以下的常量：
  QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值；
  FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
  INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配

  errorMsg 完整的错误信息，如果你不重写默认的事件处理器，可以使用‘this.queueData.errorMsg' 存取完整的错误信息
 */
 onSWFReady: function(){
  //swf动画加载完后触发，没有参数
 },
 onUploadComplete: function(file){
  //在每一个文件上传成功或失败之后触发，返回上传的文件对象或返回一个错误，如果你想知道上传是否成功，最后使用onUploadSuccess或onUploadError事件
 },
 onUploadError: function(file,errorCode,erorMsg,errorString){
 },
 //一个文件完成上传但返回错误时触发，有以下参数
 /*
  file 完成上传的文件对象
  errorCode 返回的错误代码
  erorMsg 返回的错误信息
  errorString 包含所有错误细节的可读信息
 */
 onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
  $('#pregress').html('总共需要上传'+bytesTotal+'字节，'+'已上传'+totalBytesTotal+'字节')
 },
 //每更新一个文件上传进度的时候触发,返回以下参数
 /*
  file 正上传文件对象
  bytesUploaded 文件已经上传的字节数
  bytesTotal 文件的总字节数
  totalBytesUploaded 在当前上传的操作中（所有文件）已上传的总字节数
  totalBytesTotal 所有文件的总上传字节数
 */
 onUploadStart: function(file){
  console.log('start update')
 },
 //每个文件即将上传前触发
 onUploadSuccess: function(file,data,respone){
  alert( 'id: ' + file.id
    + ' - 索引: ' + file.index
　　　　　　　　　　+ ' - 文件名: ' + file.name
　　　　　　　　　　+ ' - 文件大小: ' + file.size
　　　　　　　　　　+ ' - 类型: ' + file.type
　　　　　　　　　　+ ' - 创建日期: ' + file.creationdate
　　　　　　　　　　+ ' - 修改日期: ' + file.modificationdate
　　　　　　　　　　+ ' - 文件状态: ' + file.filestatus
　　　　　　　　　　+ ' - 服务器端消息: ' + data
　　　　　　　　　　+ ' - 是否上传成功: ' + response);
 }
 //每个文件上传成功后触发    
})

Methods:

Uploadify는 jquery에서 권장하는 플러그인 모드를 사용합니다. 즉, 모든 메서드 호출은 네임스페이스에 보관됩니다. 이러한 다양한 메소드를 호출하려면 해당 메소드를 uploadify의 첫 번째 매개변수로 전달하고 호출하기만 하면 됩니다. 이러한 메소드 뒤에 매개변수를 추가하면 이 메소드에 전달됩니다(이 두 문장의 번역이 매끄럽지 않아 원본 텍스트가 첨부되어 있습니다. 다른 메소드 호출을 사용하려면 메소드 호출을 첫 번째로 사용하여 DOM 요소에서 Uploadify를 호출하기만 하면 됩니다. 인수입니다. 메소드 이름 뒤에 추가된 추가 인수는 메소드에 전달됩니다.)

cancel: 첫 번째 업로드된 파일을 취소합니다. 매개변수 "*"를 따르면 $(el)과 같이 전체 업로드 대기열이 취소됩니다. .uploadify(' cancel', '*')

upload: 첫 번째 업로드된 파일을 업로드합니다. 매개변수 "*"를 따르면 취소

destroy와 동일하게 전체 대기열이 업로드됩니다. 업로드 구성 요소를 제거하고 HTML의 기본 방법에 따른 업로드

disable: 업로드 버튼을 금지할지 여부를 나타내는 두 가지 매개변수가 있습니다. true는 금지됨을 의미하고, false는 업로드가 허용됨을 의미합니다.

settings: 메소드 값을 반환하거나 업데이트합니다. 인스턴스입니다. 메서드 이름이 포함된 매개 변수를 수락하면 해당 메서드가 반환되고 매개 변수가 뒤에 오면 해당 메서드의 값이 업데이트됩니다. 예를 들어

$(el).uploadify('settings','buttonText','BROWSE'); //设置buttonText的值为BROWSE
$(el).uploadify('settings','buttonText') //返回buttonText的值

stop: 업로드 중인 파일 또는 대기열을 중지하세요

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

AngularJs Forms 분석 정보

jQuery의 이미지 로딩 실패 문제 정보

위 내용은 jQuery 파일 업로드 제어 Uploadify 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!