使用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也可以选择性加入)。

下面就是代码部分了!

 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)。基本功能是实现了的,但是在测试过程中发现当上传出错的时候,比如我选择一个超过大小限制的图片,会弹出英文的提示,这肯定不行啊!

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

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

时间: 2024-11-08 23:53:22

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

MVC3+jquery Uploadify 上传文件

最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地址:http://www.uploadify.com/download/ 1.引用文件 <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet"

jQuery之批量上传文件插件之一

$("#uploader").plupload({     /*常规设置*/     runtimes:'html5,flash,silverlight,html4',     url:'hyzx/seller/commPicUpload.action',     /*最大文件限制b, kb, mb, gb, tb */     max_file_size:'1mb',     /*是否生成唯一文件名,如果为true会为上传的文件唯一的文件名.*/     unique_names:t

在MVC中利用uploadify插件实现上传文件的功能

趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同时借鉴别人的经验,经过断断续续的修改(中间一直被安排其它事),把uploadify默认的样式改,同时把共性都封装了一下,最终完工了. 1.在_Layout.cshtml 页面中引入js文件和CSS文件: 1 @*-------上传文件--------*@ 2 <link href="@Url.

SpringMVC+jquery.uploadify 上传文件

前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在Controller Action中用@RequestParam MultipartFile file就能拿到上传文件信息.后我直接使用uploadify的方式上传,接口没有做任何调整,上传的过程中报http400, 客户端的请求不符合接口的要求,表单post提交时报文参数是以Form Data方式,

uploadify上传文件(2)--基础语法

隔了好久,因为最近搬家,离开从小生活的城市,来到杭州.找工作.找房子等诸多事宜耽误了这篇文章许久.今天难得闲暇在旅馆中完成uploadify上传文件系列的第二篇--uploadify使用的基础语法. 下面我们看一看如何在你的项目上部署uploadify: 本文目录: 1.使用步骤 2.属性 3.事件 4.方法 使用步骤 1.我们假定上传控件部署在网站根目录下的upload. php中,uploadify文件夹位于网站根目录中,上传的文件保存在根目录下的upload文件夹中,uploadify文件

ASP.NET Uploadify 上传文件过大报错

Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:<httpRuntime maxRequestLength="2097100" executionTimeout="3600"/> 配置即可.可是当我这里修改了之后发现还是错误.就想是不是上传控件本身有限制,看到我的有limitSize:30 已经设置了大小,但

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

asp.net中fileupload上传文件的方法

FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\test.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件. 用户选择要上载的文件后,FileUpload 控件不会自动将该文件保存到服务器.您必须显式提供一个控件或机制,使用户能提交指定的文件.例如,可以提供一个按钮,用户单击它即可上载文件