前端HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="js/jquery.js"></script>
<meta charset="utf-8" />
<style type="text/css">
form{
position: relative;
}
ul li{
list-style: none;
}
.divide ul li img{
width: 100px;
border: 3px solid #eeeeee;
}
.selected{
border: 3px solid #0099aa;
}
form input{
position: absolute;
top: 0;
left: 0;
padding: 20px;
opacity: 0;
}
button{
padding: 20px;
background: #0099aa;
border-radius: 3px;
border: 2px solid #333333;
color: #ffffff;
font-size: 18px;
}
.loading{
display: none;
}
pre{
background: #000;
color: #fff;
}
textarea{
outline: none;
border: none;
width: 90%;
height: 400px;
background: none;
color: #fff;
font-size: 14px;
line-height: 14px;
}
</style>
</head>
<body> <input type="file" id="file" multiple="multiple" /> <div class="loading"><img src="loading.gif" /></div>
<div class="divide">
<ul> </ul>
</div> <script type="text/javascript">
$(function(){ var tt; $("#file").change(function(){ data = new FormData();
data.append('files', $('#file')[0].files[0]);
$.ajax({
type: "post",
url: "upload.php",
processData: false,
contentType: false,
data: data,
success: function(a, b, c){
$("div ul").append("<li class='del'>文件上传成功!<img src='" + a + "' /> <input type='text' value='"+a+"' /></li>");
tt = a;
$(".del").bind("click", function(){
$.ajax({
type: "post",
url: "del.php",
data: {
a : tt,
},
success: function(a, b, c){
alert(a);
}
});
$(this).hide(200);
});
}
}); }); });
</script> </body>
</html>

执行文件上传 upload.php

<?php

    $origname = $_FILES["files"]["name"];
$ext = strtolower(substr($origname, strrpos($origname, ".")+1));
$tmpfile = $_FILES["files"]["tmp_name"];
$filename = "./upload/".time().".".$ext;
move_uploaded_file( $tmpfile, $filename);
echo $filename; ?>

执行文件删除 del.php

<?php

if(unlink($_POST["a"])){
echo "文件删除成功!";
}else{
echo "文件删除失败!";
} ?>

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除的更多相关文章

  1. SpringMVC文件上传 Excle文件 Poi解析 验证 去重 并批量导入 MYSQL数据库

    SpringMVC文件上传 Excle文件 Poi解析并批量导入 MYSQL数据库  /** * 业务需求说明: * 1 批量导入成员 并且 自主创建账号 * 2 校验数据格式 且 重复导入提示 已被 ...

  2. struts2文件上传,文件类型 allowedTypes

    struts2文件上传,文件类型 allowedTypes 1 '.a' : 'application/octet-stream', 2 '.ai' : 'application/postscript ...

  3. SpringMVC单文件上传、多文件上传、文件列表显示、文件下载(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程 ...

  4. java使用Jsch实现远程操作linux服务器进行文件上传、下载,删除和显示目录信息

    1.java使用Jsch实现远程操作linux服务器进行文件上传.下载,删除和显示目录信息. 参考链接:https://www.cnblogs.com/longyg/archive/2012/06/2 ...

  5. webAPI文件上传时文件过大404错误的问题

    背景:最近公司有个需求,外网希望自动保存数据到内网,内网有2台服务器可以相互访问,其中一台服务器外网可以访问,于是想在 这台服务器上放个中转的接口.后来做出来以后测试发现没有问题就放线上去了,不顾发现 ...

  6. Javascript Fromdata 与jQuery 实现Ajax文件上传

    <!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...

  7. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  8. 关于ajax 异步文件上传 node 文件后台接口

    <body> <img src="" alt="" id="img"> <input type="f ...

  9. spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)

    一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...

随机推荐

  1. NSObject Class 浅析

    Objective-C中有两个NSObject,一个是NSObject类,另一个是NSObject协议.而其中NSObject类采用了NSObject协议.在本文中,我们主要整理一下NSObject类 ...

  2. ReactiveCocoa的冷信号与热信号 探讨

    背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的FRP框架.FRP即Functional Reactive Programming(函数式响应式编程), ...

  3. [转]Java初始化顺序总结 - 静态变量、静态代码块、成员变量、构造函数

    Java初始化顺序1在new B一个实例时首先要进行类的装载.(类只有在使用New调用创建的时候才会被java类装载器装入)2,在装载类时,先装载父类A,再装载子类B3,装载父类A后,完成静态动作(包 ...

  4. java 设计模式之工厂模式与反射的结合

    工厂模式: /**  * @author Rollen-Holt 设计模式之 工厂模式  */   interface fruit{     public abstract void eat(); } ...

  5. [IDL入门] 两个PPT,IDL上手

    首先看看IDL能干什么,<Solving Real Problems with Computer Graphics>ppt是英文的,很精彩. 下载地址:http://pan.baidu.c ...

  6. HDU 3552 I can do it!

    脑洞题.http://blog.csdn.net/dgq8211/article/details/7748078 #include<cstdio> #include<cstring& ...

  7. 最新最全的html5标签集合

    最新最全的html5标签集合,按字母顺序排列的标签列表 4:指示在HTML4.01中定义了该元素 5:指示在HTML5中定义了该元素 标签 描述 <!--...--> 定义注释 <! ...

  8. Struts2 语法--result type

    result type: dispatcher,redirect:只能跳转到jsp,html之类的页面,dispatcher属于服务器跳转, redirect属于客户端跳转 chain: 等同于for ...

  9. Developing Backbone.js Applications

    https://addyosmani.com/backbone-fundamentals/

  10. emacs command

    eval-buffer用来执行.emacs不要再重启了,或cxce执行光标前的一行 eval-region load-file ~/.emacs goto-line global-set-key定义快 ...