JQuery文件上传插件jquery.uploadify-v2.1.0的详细使用方法

时间: 2013-12-9 分类: Javascript 作者: SAI

TAGS:

今天试了试JQuery的文件上传插件,感觉非常的好用,可以自定义任意的任意的链接标签或者其他表单元素,AJAX功能的上传控件很适合做前端,这个控件目前也比较成熟,可以用在项目中

查看AjaxFileUpload相关jQuery官方文档介绍

下载AjaxFileUpload JS库文件

查看AjaxFileUpload演示

一,创建一个AJAX按钮元素,可以是任意的标签比如<div>,将ID写为”fileUpload”

<div id=”fileUpload“>上传</div>

在HTML中加入以下JavaScript代码:

 

 $(document).ready(function() {
$(“#fileUpload”).fileUpload({
‘uploader': ‘uploadify/uploader.swf’,
‘cancelImg': ‘uploadify/cancel.png’,
‘script': ‘uploadify/upload.php’,//要提交到的处理文件上传的PHP文件
  ‘folder': ‘../files’,//要上传到哪个目录下,可以使用../../images这样的路径
‘multi': false,
‘displayData': ‘speed’,onComplete: function (evt, queueID, fileObj, response, data) {//onComplete表示文件上传成功事件调用函数
   alert(“”+response);//调用传递回来的响应信息
}
});

接下来就是PHP文件的代码.里面只有几行

 <?php
if (!empty($_FILES)) {
$tempFile = $_FILES[‘Filedata’][‘tmp_name’];
$targetPath = $_SERVER[‘DOCUMENT_ROOT’] . $_GET[‘folder’] . ‘/';
$targetFile =  str_replace(‘//’,’/’,$targetPath) . $_FILES[‘Filedata’][‘name’];if(move_uploaded_file($tempFile,$targetFile)){
echo “”.$_FILES[‘Filedata’][‘name’];//此行表示要返回所上传的文件名;
 }else{
echo “2”;
}

}else{

echo ‘1’;
}

?>

调用方法很简单,下面是HTML页面代码

<div id=”fileUpload”>You have a problem with your javascript</div>
<a href=”javascript:$(‘#fileUpload’).fileUploadStart()”>Start Upload</a> |  <a href=”javascript:$(‘#fileUpload’).fileUploadClearQueue()”>Clear Queue</a>

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » JQuery文件上传插件jquery.uploadify-v2.1.0的详细使用方法
本文地址:http://www.saiody.com/?p=1046

返回顶部