AjaxFileUpload文件上传组件(php+jQuery+ajax)
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)的更多相关文章
- web文件上传组件比较jQuery File Upload和Fine Uploader
jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/ Fine Uploader: http://fineuploader ...
- 异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- 前端异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- Atitit..文件上传组件选型and最佳实践总结(2)----断点续传
Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...
随机推荐
- .NET框架概述
.NET战略目标: 任何时候(when),任何地方(where),使用任何工具(what)都能通过.NET的服务获得网络上的任何信息. .NET优势: 1.提供了一个面向对象的编程环境,完全支持面向对 ...
- AJPFX关于this用法和注意事项
this:代表对象.就是所在函数所属对象的引用.哪个对象调用了this所在的函数,this就代表哪个对象,就是哪个对象的引用.开发时在定义功能时,如果该功能内部使用到了调用该功能的对象,这时就用thi ...
- 有关HTML版本
先说说HTML的简史:从HTML1.0~2.0(1989~1991)>HTML3(1995)>HTML4(1998)>HTML4.01(1999)>XHTML1.0(2001) ...
- vue2.0 路由知识一(路由的创建的全过程)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 迅为7寸工业平板电脑|人机界面|工业触摸屏|工控机|HMI|工业显示器
型号:iTOP-HMI070-C 7寸工业平板电脑特点: 1.iTOP-HMI070-C(CAN) 7寸工业触摸屏,CAN总线型触摸屏,配有2组独立的串口和一路CAN总线口: 2.串口都支持各种PLC ...
- 以JSONobject形式提交http请求
总结一下设置图标的三种方式: (1)button属性:主要用于图标大小要求不高,间隔要求也不高的场合. (2)background属性:主要用于能够以较大空间显示图标的场合. (3)drawableL ...
- caffe编译
用make -j带一个参数,可以把项目在进行并行编译,比如在一台双核的机器上,完全可以用make -j4,让make最多允许4个编译命令同时执行,这样可以更有效的利用CPU资源 也就是说make -j ...
- js【table】合并行，合并列
eg: function hbh() { var tab = document.getElementById("tableID"); var maxCol = 2, val, co ...
- Visual Studio 2013/2015/2017快捷键（转载）
本文为转载文章,原文:[心存善念] [Fonour] 项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示 Solution Explorer(解 ...
- ehcache的学习笔记（一）
学习ehcache文档: 介绍:Ehcache是一个开源的项目,用来提高性能的基于标准化的缓存,无需使用数据库,简化了可扩展性.他是最广泛使用的基于java的缓存,因为他是强壮的,被证实的,功能全面的 ...