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. 关于springMVC传参问题

    今天写项目,碰到一个以前灭有注意到的问题,一般情况下使用springMVC @Controller注解之后,被此注解标记的方法的参数名只需要跟页面表单的标签的name的值相同即可拿到页面的值,但是如果 ...

  2. 使用nginx搭建简单文件服务器

    最近再做一个博客,本想使用fastdfs标准的文件存储服务器,但考虑到资源占用问题,且使用nginx比较快速,且效果不差.于是采用ngixn搭建. nginx搭建文件服务器,本质上就是nginx的静态 ...

  3. Sqlmap脱库之“你的数据我所见”

    废话不多说,介绍和理论啥的网上一搜一大把,一次只为tuoku. 实战操作: 1.在网上找个index.php?id=1的站点 2.很明显看到了脱下裤子的希望,sqlmap走一把.查看数据库 3.怎么看 ...

  4. IntelliJ IDEA导入JDK出现The selected directory is not a valid home for JDK问题的解决方法

    JDK版本与IDEA版本不兼容: JDK版本过高可能会造成这个问题,需与IDEA相兼容的JDK才行. 比如,用IDEA2016.3.8版本的,JDK用jdk-10.0.1_windows-x64_bi ...

  5. 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据

    动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格

  6. 在PetaPoco中使用Where in

    之前一直没在意,今天查了很多资料,才知道在petapoco中使用in关键字需要使用命名参数,否则是无效的(或者只查出第一个条件的记录),示例如下: var tags= new string[]{“c1 ...

  7. leetcode_1015. Numbers With Repeated Digits

    https://leetcode.com/problems/numbers-with-repeated-digits/ 与leetcode_357. Count Numbers with Unique ...

  8. discuz 插件核心函数hookscript分析.

    function hookscript($script, $hscript, $type = 'funcs', $param = array(), $func = '', $scriptextra = ...

  9. 5-Java-C（小题答案）

    1. a[i][j]=a[i-1][j-1]+a[i-1][j] 2.1835421 3.93 4.1572836

  10. pycharm 编写前端代码一些小技巧

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...