jquery.form上传文件
建立test文件夹
PHP代码：
<?php
//var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_GET['option']=='delete'){
@file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET['path']."\r\n",FILE_APPEND);
unlink($_GET['path']);
$rs[] = array(
'success'=>true,
'info'=>'ok'
);
if(file_exists($_GET['path'])){
$rs[]['success']=false;
$rs[]['info']='未删除';
}
die(json_encode($rs));
} if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < (1024*1024)))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
if (file_exists("test/" . $_FILES["file"]["name"]))
{
$fn = $_FILES["file"]["name"];
}
else
{
$imgurl = substr($_FILES["file"]["name"], strpos($_FILES["file"]["name"], '.'));
$imgurl = date("YmdHis",time()).$imgurl;
move_uploaded_file($_FILES["file"]["tmp_name"],"test/" . $imgurl);
$fn = "test/" . $imgurl;
}
}
$return_str[] = array(
'guid'=>date('His',time()),
'path'=>'test/',
'fileName'=>$fn,
'success'=>true
);
}
else
{ $return_str[] = array(
'guid'=>date('His',time()),
'path'=>'test/',
'fileName'=>$_FILES["file"]["name"],
'success'=>false,
'error'=>$_FILES["file"]["error"]
);
}
echo json_encode($return_str);
?>
HTML代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<title>文件上传</title>
<style type="text/css">
.btn {
position: relative;
background-color: blue;
width: 80px;
text-align: center;
font-size: 12px;
color: white;
line-height: 30px;
height: 30px;
border-radius: 4px;
}
.btn:hover {
cursor: pointer;
}
.btn input {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
line-height: 30px;
height: 30px;
width: 80px;
}
#fileLsit li span {
margin-left: 10px;
color: red;
}
#fileLsit {
font-size: 12px;
list-style-type: none;
}
</style>
</head>
<body>
<div class="btn"> <span>添加附件</span>
<!--这里注意：file 标签必须具有name属性，由于没有加name属性，文件上传不到服务到哪-->
<input type="file" id="fileName" name="file" />
</div>
<ul id="fileLsit" style="border:1px solid red;">
</ul>
<!--引入jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--引入jquery.form插件-->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
jQuery(function () {
var option =
{
type: 'post',
dataType: 'json', //数据格式为json
resetForm: true,
beforeSubmit: showRequest,//提交前事件
uploadProgress: uploadProgress,//正在提交的时间
success: showResponse//上传完毕的事件
}
jQuery('#fileName').wrap(
'<form method="post" action="test.php" id="myForm2" enctype="multipart/form-data"></form>');
jQuery('#fileName').change(function () {
$('#myForm2').ajaxSubmit(option);
});
});
//删除文件
var deleteFile = function (path, guid) {
console.log(path+'/'+guid);
jQuery.getJSON('test.php?option=delete', { path: path }, function (reslut) {
console.log(path+'/'+guid+''+reslut[0].info);
if (reslut[0].success) {//删除成功
jQuery('#' + guid).remove();
console.log('删除成功');
} else {//删除失败
alert(reslut[0].info);
}
});
console.log('end');
}
//上传中
var uploadProgress = function (event, position, total, percentComplete) {
jQuery('.btn span').text('上传中...');
}
//开始提交
function showRequest(formData, jqForm, options) {
jQuery('.btn span').text('开始上传..');
var queryString = $.param(formData);
}
//上传完成
var showResponse = function (responseText, statusText, xhr, $form) {
console.log(responseText);
if (responseText[0].success) {//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。
var str = '<li id="' + responseText[0].guid + '"><a href="' + responseText[0].fileName + '" target="_blank">' + responseText[0].fileName + '</a><span onclick="deleteFile(\'' + responseText[0].fileName + '\',\'' + responseText[0].guid + '\')" >删除</span></li>';
jQuery('#fileLsit').append(str);
}
jQuery('.btn span').text('上传完成');
jQuery('.btn span').text('添加附件');
}
</script>
</body>
</html>
jquery.form上传文件的更多相关文章
- jQuery.form 上传文件
今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- c# 模拟表单提交，post form 上传文件、大数据内容
表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- c# 模拟表单提交，post form 上传文件、数据内容
转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...
随机推荐
- size_t和size_type类型
size_t一般用来表示一种计数,比如有多少东西被拷贝等.例如:sizeof操作符的结果类型是size_t,该类型保证能容纳实现所建立的最大对象的字节大小. 它的意义大致是“适于计量内存中可容纳的数据 ...
- 实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)
①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取che ...
- python成长之路第三篇（4）_作用域，递归，模块，内置模块（os，ConfigParser，hashlib），with文件操作
打个广告欢迎加入linux,python资源分享群群号:478616847 目录: 1.作用域 2.递归 3.模块介绍 4.内置模块-OS 5.内置模块-ConfigParser 6.内置模块-has ...
- 70道android面试题汇总
1. 下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存 B. 内存回收程序负责释放无用内存 C. 内存回收程序允许程序员直接释放内存 D. 内存回收程序可以在 ...
- java类中的static成员变量和static方法简单介绍，持续补充
一.静态成员变量 1.属于整个类而不是某个对象实例,所以可以直接通过类名和对象名去调用. 2.静态成员属于整个类,当系统第一次使用该类时,就会为其分配内存空间直到该类被卸载才会进行资源回收 二.静态方 ...
- Expedition（优先队列）
Expedition 点我 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9465 Accepted: 2760 Des ...
- Method Resolution Order – Python类的方法解析顺序
在支持多重继承的编程语言中,查找方法具体来自那个类时的基类搜索顺序通常被称为方法解析顺序(Method Resolution Order),简称MRO.(Python中查找其它属性也遵循同一规则.)对 ...
- class A<T>where T
where表明了对类型变量T的约束关系.where T: A表示类型变量是继承于A的,或者是A本身.where T:new()指明了创建T的实例时应该使用的构造函数.
- SQLServer优化资料整理（二）
存储过程编写经验和优化措施 一.适合读者对象:数据库开发程序员,数据库的数据量很多,涉及到对SP(存储过程)的优化的项目开发人员,对数据库有浓厚兴趣的人. 二.介绍:在数据库的开发过程中,经常会遇到复 ...
- shell字符串
字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似. 单引号 str='this ...