使用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也可以选择性加入)。
下面就是代码部分了!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../Js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../Js/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="../CSS/uploadify.css"/>
</head>
<script type="text/javascript">
$(function()
{
$("#submit").click(function(){
if($("#img").data('uploadify').queueData.queueLength==1){
$("#img").uploadify('upload');//检查是否有正确的图片数量,不能用$("#img").val()!!
}
else{
alert("上传数量错误,需要一张图片");
}
});
$("#img").uploadify({
'swf':'../player/uploadify.swf',
'uploader':'l.php',
'buttonText': '选择图片',//按钮上显示的图片
'auto':false,//是否选择图片后自动上传
'fileObjName':'img', //这里的名字是php文件接受files名($_FILES['img']),默认为'FilesData',之前版本该项名为fileataName
'fileTypeExts': '#.jpeg; *.jpg; *.png;',//上传文件的类型限制
'fileTypeDesc':'请选择jpeg jpg png类型图片',//似乎有了这一项就可以执行上边的限制了,在选择文件时可以筛选相关类型
'fileSizeLimit':1024,//上传文件的大小限制,单位为kb
'queueID':'queue',//上传队列的div的id
'multi':false,//是否可以多文件上传
'onUploadSuccess': function (file, data, response) {
$('#' + file.id).find('.data').html(' 上传完毕');}, //具体不明白实现原理,但是功能是在上传完毕时,显示中文“上传完毕”
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
}, //报错方法,不会用,errorCode,errorMsg等参数如何获取?
'onUploadSuccess': function (file, data, response) { //从服务器端获得返回值,这里用1代表成功,0代表失败,有网友说这个onUploadSuccess方法之前时onComplete
alert(data);
if (response && data === "1") {
alert('上传成功');
}
else {
alert('上传失败');
}
}
}); });
</script>
<body>
<div id="queue"></div>
<input id="img" name="img" type="file">
<button id="submit">提交</button>
</body>
</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"改成中文,搞定,效果如下:
若有错误或者建议请指出!谢谢
使用jquery插件uploadify上传文件的方法与疑问的更多相关文章
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- MVC3+jquery Uploadify 上传文件
最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...
- uploadify 上传文件插件
今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...
- 在MVC中利用uploadify插件实现上传文件的功能
趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...
- SpringMVC+jquery.uploadify 上传文件
前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在C ...
- uploadify上传文件(2)--基础语法
隔了好久,因为最近搬家,离开从小生活的城市,来到杭州.找工作.找房子等诸多事宜耽误了这篇文章许久.今天难得闲暇在旅馆中完成uploadify上传文件系列的第二篇--uploadify使用的基础语法. ...
- ASP.NET Uploadify 上传文件过大报错
Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:&l ...
- ASP.NET Uploadify 上传文件过大 报错(http error)借鉴,以防忘记
Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:&l ...
- 朋友封装的一个ASP.NET上传文件的方法
朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...
随机推荐
- 做了一个js的拉动遮罩层,两个图片分别显示的效果
想做成车修好了和没修好的对比,所以需要两个图片.需要用到的知识点, 1.定位 2.mouse 的事件(代码中体现) 3.鼠标指针的移动距离算法 4.css中,cursor的应用 好了,废话不多说 ,直 ...
- 关于tuple的只读特性
a = (1,3,[5,4,1]) a[2][1] = 2 print(a) 结果是:(1,3,[5,2,1]) 可以看到,在这里tuple的内容被修改了. 原因就是tuple的“只读”属性是指tup ...
- “弹出DVD驱动器错误”解决方法
错误描述:(win7环境) 买了个开发板,赠送了一些光盘,放在电脑光驱中打开后,电脑就疯狂响,可能是光盘质量太差.用完后在弹出时显示“弹出DVD驱动器错误”[见图1].直接按主机上弹出按钮也没有反应. ...
- mysql--help不可用
1.问题描述: 执行help语句时没有得到相应的返回只是提示检查相关表是不是已经加载: mysql> help contents; Nothing found Please check if ' ...
- 【温故而知新-万花筒】C# 异步编程 逆变 协变 委托 事件 事件参数 迭代 线程、多线程、线程池、后台线程
额基本脱离了2.0 3.5的时代了.在.net 4.0+ 时代.一切都是辣么简单! 参考文档: http://www.cnblogs.com/linzheng/archive/2012/04/11/2 ...
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- centos单用户模式:修改ROOT密码和grub加密
centos单用户模式:修改ROOT密码和grub加密 CentOSLinux网络应用配置管理应用服务器 Linux 系统处于正常状态时,服务器主机开机(或重新启动)后,能够由系统引导器程序自动引导 ...
- UESTC_Ferris Wheel String 2015 UESTC Training for Search Algorithm & String<Problem L>
L - Ferris Wheel String Time Limit: 3000/1000MS (Java/Others) Memory Limit: 43000/43000KB (Java/ ...
- 那些年的那些事CISC和RISC发展中的纠缠
本文来自http://www.cnbeta.com/articles/224544.htm ARM.ARM.ARM,没错ARM仿佛一夜之间就火了,平板.手机等领域随处可见它的影子,甚至已经有人预言未来 ...
- java 8 中lambda表达式学习
转自 http://blog.csdn.net/renfufei/article/details/24600507 http://www.jdon.com/idea/java/10-example-o ...