我是学生一枚，专业也不是计算机，但又要用到很多相关技术，所以在技术基础不牢靠的情况下，硬着头皮在做。最近在做一个小项目需要上传图片，而且是需要用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上传文件的方法与疑问的更多相关文章

  1. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  2. MVC3+jquery Uploadify 上传文件

    最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...

  3. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

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

    趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...

  5. SpringMVC+jquery.uploadify 上传文件

    前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在C ...

  6. uploadify上传文件（2）--基础语法

    隔了好久,因为最近搬家,离开从小生活的城市,来到杭州.找工作.找房子等诸多事宜耽误了这篇文章许久.今天难得闲暇在旅馆中完成uploadify上传文件系列的第二篇--uploadify使用的基础语法. ...

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

    Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:&l ...

  8. ASP.NET Uploadify 上传文件过大 报错（http error）借鉴，以防忘记

    Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:&l ...

  9. 朋友封装的一个ASP.NET上传文件的方法

    朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...

随机推荐

  1. CDZSC_2015寒假新人（2）——数学 P

    P - P Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  2. [C++程序设计]函数模板

    定义函数模板的一般形 式为 template < typename T> 或 template <class T> 函数模板: 函数参数个数,函数体相同.参数类型不同 函数重载 ...

  3. Asp.Net MVC+EF+三层架构的完整搭建过程

    架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案下,新建解决方案文件夹(UI,BLL,DAL,Model) ...

  4. SRAM与SDRAM的比较（转）

    原文:http://blog.csdn.net/fg8181/article/details/2278100 内存在电脑中起着举足轻重的作用,一般采用半导体存储单元,包括随机存储器(RAM),只读存储 ...

  5. SQLServer优化资料整理（二）

    存储过程编写经验和优化措施 一.适合读者对象:数据库开发程序员,数据库的数据量很多,涉及到对SP(存储过程)的优化的项目开发人员,对数据库有浓厚兴趣的人. 二.介绍:在数据库的开发过程中,经常会遇到复 ...

  6. FAT16文件系统简介

    有必要说明一下,以下对FAT16系统的介绍,很多都是参考文献.由于FAT16系统一般在U盘.MMC卡.SD卡以及一些小型存储设备上使用比较多,以后把这些小型存储设备统称为存储卡,这里仅局限于对存储卡的 ...

  7. Ring3下Hook NtQueryDirectoryFile隐藏文件

    NTSTATUS WINAPI Hook_NtQueryDirectoryFile(IN HANDLE FileHandle,IN HANDLE Event OPTIONAL,IN PIO_APC_R ...

  8. Asp.net MVC Web.config配置技巧

    一.视图引入命名空间的设置 之前经常写这样的代码,而且每个页面都要写: @model IEnumerable<MvcStart.Models.People_Model> 其实有一种很方便的 ...

  9. FileStream类

    使用FileStream能够对对系统上的文件进行读.写.打开.关闭等操作.并对其他与文件相关的操作系统提供句柄操作,如管道,标准输入和标准输出.读写操作可以指定为同步或异步操作.FileStream对 ...

  10. Silverlight 结合ArcGis

    原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/09/72064.aspx 终于有机会谈到ArcGis(觉得很冷门) ,不过既然都做 ...