星空网 > 软件开发 > Java

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

我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做。最近在做一个小项目需要上传图片,而且是需要用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='/images/loading.gif' data-original="../Js/jquery-1.11.3.min.js"></script>  7   <script type="text/javascript" src='/images/loading.gif' data-original="../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',之前版本该项名为fileataName27       'fileTypeExts': '#.jpeg; *.jpg; *.png;',//上传文件的类型限制28       'fileTypeDesc':'请选择jpeg jpg png类型图片',//似乎有了这一项就可以执行上边的限制了,在选择文件时可以筛选相关类型29       'fileSizeLimit':1024,//上传文件的大小限制,单位为kb30       'queueID':'queue',//上传队列的div的id31       '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方法之前时onComplete38         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上传文件的方法与疑问

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




原标题:使用jquery插件uploadify上传文件的方法与疑问

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

MoreLink:https://www.ikjzd.com/w/1573202855243194370
Amazon Most Wished For:https://www.ikjzd.com/w/1573202861022945281
魔速达:https://www.ikjzd.com/w/1573202862118002690
母亲节:https://www.ikjzd.com/w/1573202865548599297
墨婷跨境:https://www.ikjzd.com/w/1573202866513633281
MotorTrend汽车网:https://www.ikjzd.com/w/1573202869801623553
秦皇岛到丹东旅游景点大全 秦皇岛到丹东开车多长时间:https://www.vstour.cn/a/408253.html
求推荐适合情侣玩的地方,三天时间,谢谢:https://www.vstour.cn/a/408254.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流