使用jquery插件uploadify上传文件的方法与疑问

时间：2022-08-29 13:41:03

我是学生一枚，专业也不是计算机，但又要用到很多相关技术，所以在技术基础不牢靠的情况下，硬着头皮在做。最近在做一个小项目需要上传图片，而且是需要用ajax的方式。但是利用jquery的ajax方法总会有“C:/fakepath”的问题，在网上找了很久相关解决方法，但是都太过麻烦，或者说我的水平还不到。但也看到有的人说可以用jquery的文件上传插件，于是百度。发现http://www.oschina.net/news/20298/20-excellent-jquery-file-upload-plugins-tutorials这里提到了一款uploadify的插件，看了介绍之后发现小巧，且满足要求。在这里记录一下，帮助我自己学习的同时，如果能帮到其他小伙伴，则高兴至极！

首先是uploadify的下载，直接百度，在官网上有两种版本，一种是免费的flash版本，一种是收费$5的html5版本。又没人给我报销，选择了前者。

下载下来后它给的目录如下，将min.js、css还有swf三个文件复制到项目的相关目录中（cancel.png也可以选择性加入）。

使用jquery插件uploadify上传文件的方法与疑问

下面就是代码部分了！

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript" src="../Js/jquery-1.11.3.min.js"></script> 
 7     <script type="text/javascript" src="../Js/jquery.uploadify.min.js"></script>
 8     <link rel="stylesheet" href="../CSS/uploadify.css"/>
 9 </head>
10 <script type="text/javascript">
11     $(function()
12     {
13         $("#submit").click(function(){
14             if($("#img").data('uploadify').queueData.queueLength==1){
15                 $("#img").uploadify('upload');//检查是否有正确的图片数量,不能用$("#img").val（）!!
16             }
17            else{
18             alert("上传数量错误,需要一张图片");
19             }
20         });
21         $("#img").uploadify({
22             'swf':'../player/uploadify.swf',
23             'uploader':'l.php',
24             'buttonText': '选择图片',//按钮上显示的图片
25             'auto':false,//是否选择图片后自动上传
26             'fileObjName':'img',  //这里的名字是php文件接受files名（$_FILES['img']），默认为'FilesData'，之前版本该项名为fileataName
27             'fileTypeExts': '#.jpeg; *.jpg; *.png;',//上传文件的类型限制
28             'fileTypeDesc':'请选择jpeg jpg png类型图片',//似乎有了这一项就可以执行上边的限制了，在选择文件时可以筛选相关类型
29             'fileSizeLimit':1024,//上传文件的大小限制，单位为kb
30             'queueID':'queue',//上传队列的div的id
31             'multi':false,//是否可以多文件上传
32             'onUploadSuccess': function (file, data, response) {
33                 $('#' + file.id).find('.data').html(' 上传完毕');}, //具体不明白实现原理，但是功能是在上传完毕时，显示中文“上传完毕”
34             'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
35                 alert('The file ' + file.name + ' could not be uploaded: ' + errorString); 
36             },  //报错方法，不会用，errorCode，errorMsg等参数如何获取？
37             'onUploadSuccess': function (file, data, response) {  //从服务器端获得返回值，这里用1代表成功，0代表失败，有网友说这个onUploadSuccess方法之前时onComplete
38                 alert(data);
39                 if (response && data === "1") {
40                     alert('上传成功');
41                 }
42                 else {
43                     alert('上传失败');
44                 }
45             }
46         });
47 
48     });
49 </script>
50 <body>
51     <div id="queue"></div>
52     <input id="img" name="img" type="file">
53     <button id="submit">提交</button>
54 </body>
55 </html>
<?php
$tmp_name=$_FILES["img"]["tmp_name"];
$name=$_FILES["img"]["name"];
$path="../img";
$size=$_FILES["img"]["size"];

if(move_uploaded_file($tmp_name,$path.'/'.$name)){
    echo "1";
}
else{
    echo "0";
}

 

这是我根据网上众多博客、帖子学习而来的最终结果（需要注意fileObjName和onUploadSuccess两项，据说是新版本改的名字，旧版本分别为fileDataName与onComplete）。基本功能是实现了的，但是在测试过程中发现当上传出错的时候，比如我选择一个超过大小限制的图片，会弹出英文的提示，这肯定不行啊！

使用jquery插件uploadify上传文件的方法与疑问

于是我本着能“管用就是好方法”的原则，在min.js中搜索了这几句化，并把固定的部分"Some files were not added to the queue:" 和“the file”,"exceeds the size limit"改成中文，搞定，效果如下：

使用jquery插件uploadify上传文件的方法与疑问

若有错误或者建议请指出！谢谢

标签：

相关文章