jQuery插件AjaxFileUpload可以实现ajax文件上传，下载地址：http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js

主要参数说明：
1，url表示处理文件上传操作的文件路径，可以测试URL是否能在浏览器中直接访问，如上：upload.php
2，fileElementId表示文件域ID，如上：fileToUpload
3，secureuri是否启用安全提交，默认为false
4，dataType数据数据，一般选json，javascript的原生态
5，success提交成功后处理函数
6，error提交失败处理函数

需要了解相关的错误提示

1，SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问

2，SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3，SyntaxError: invalid property id错误
如果出现这个错误就需要检查属性ID是否存在

4，SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件域名称是否一致或不存在

5，其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

示例代码：

=====================upload.html=======================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ajaxfileupload图片上传控件</title>

</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>

<script language="javascript">

  jQuery(function(){

      $("#buttonUpload").click(function(){

         //加载图标

         /* $("#loading").ajaxStart(function(){

            $(this).show();

         }).ajaxComplete(function(){

            $(this).hide();

         });*/

          //上传文件

        $.ajaxFileUpload({

            url:'upload.php',//处理图片脚本

            secureuri :false,

            fileElementId :'fileToUpload',//file控件id

            dataType : 'json',

            success : function (data, status){

                if(typeof(data.error) != 'undefined'){

                    if(data.error != ''){

                        alert(data.error);

                    }else{

                        alert(data.msg);

                    }

                }

            },

            error: function(data, status, e){

                alert(e);

            }

    })

    return false;

      })

  })

</script>

<body>

<input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">

<button id="buttonUpload">上传</button>

<!--<img id="loading" src="loading.jpg" style="display:none;">-->

</body>

</html>

=====================upload.php=======================

$res["error"] = "";//错误信息

$res["msg"] = "";//提示信息

if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"c:\\test.jpg")){

    $res["msg"] = "ok";

}else{

    $res["error"] = "error";

}

echo json_encode($res);

AjaxFileUpload文件上传组件(php+jQuery+ajax)的更多相关文章

  1. web文件上传组件比较jQuery File Upload和Fine Uploader

    jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/ Fine Uploader: http://fineuploader ...

  2. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  3. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  4. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  5. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  6. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  7. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  8. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  9. Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...

随机推荐

  1. [Luogu1848][USACO12OPEN]书架Bookshelf DP+set+决策单调性

    题目链接:https://www.luogu.org/problem/show?pid=1848 题目要求书必须按顺序放,其实就是要求是连续的一段.于是就有DP方程$$f[i]=min\{f[j]+m ...

  2. 萌新--关于vue.js入门及环境搭建

    十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...

  3. idea 部署struts所遇到的问题\

    1.org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter 加载失败 解决方法:下载struts2 的源码包,然后将D:\ ...

  4. [Tunny]CSS LESS框架基础

    [黄映焜/Tunny,20140711] Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) ...

  5. SQL Server中行列转置方法

    PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P ...

  6. Farseer.net轻量级开源框架 中级篇：Cookies、Session、Request

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 探究ORM(Mapping) 下一篇:Farseer.net轻量级开源框架 中级篇 ...

  7. centOS linux 下PHP编译安装详解

    一.下载PHP源码包 wget http://php.net/distributions/php-5.6.3.tar.gz   二.添加依赖应用 yum install -y gcc gcc-c++ ...

  8. HDU_1856_带权并查集

    有10000000个同学,他们之间可能是直接朋友或者间接朋友,问最大的朋友圈有多少人. 一直觉得10000000的数组开不了,用map优化了一下,结果能开,且10000000也不会超时... #inc ...

  9. HTML a标签的href 属性 tel 点击可以直接拨打电话 ( 移动端 )

    <a href="tel:13828172679">13622178579</a>

  10. css3 平行四边形 、大括弧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...