前端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. sql server数据库中 INFORMATION_SCHEMA的用法

    1.查询数据库的所有表: select * from INFORMATION_SCHEMA.TABLES 2.查询表名为xxx的所有列的信息 select * from INFORMATION_SCH ...

  2. 转 Oracle DBCA高级玩法：从模板选择、脚本调用到多租户

    但凡是学过Oracle的同学,对DBCA(Database Configuration Assistant, DBCA)都不会陌生,有了这个工具,使得创建数据库成为可能.而DBCA本身有图形和静默两种 ...

  3. C++虚函数的新用法

    1.今天在segmentfault上看到了一个C++虚函数的新用法,先上代码 #include <iostream> using namespace std; class B { publ ...

  4. javascript语句语义大全（1）

    1. <script></script> javascript标签对,所有javascript内容都会写在这个里面 2. var a=0; var a; 变量的声明,上面的是声 ...

  5. FZU 2086 餐厅点餐（枚举）

    ///个人感觉vector好看一点 #include<iostream> #include<cstdio> #include<cstring> #include&l ...

  6. asp 随机生成字符

    <%function rndNumLetters(num) randomize dim num0,num1,num2,num3,pass if num = "" or not ...

  7. ONES 安装、配置以及初始化配置

    环境依赖 bower composer php 5.5.9+ mysql 5.6.5+ PHP和MySQL版本均为最低要求版本,安装前请先确认. 通过CLI安装 $ git clone http:// ...

  8. POJ 1821 单调队列+dp

    题目大意:有K个工人,有n个墙,现在要给墙涂色.然后每个工人坐在Si上,他能刷的最大范围是Li,且必须是一个连续子区间,而且必须过Si,他刷完后能获得Pi钱 思路:定义dp[i][j]表示前i个人,涂 ...

  9. 利用hibernate实现oracle（每张表的ID）自动增长

    设置ID的增长策略是sequence,同时指定sequence的名字,最好每个表建一个sequence 例如创建一个序列:CREATE SEQUENCE DEPARTMENT_ID_SEQ MINVA ...

  10. android 以不规则图片为边框切割另外图片

    转自:http://blog.sina.com.cn/s/blog_474928c90101dkvf.html 最近工作上遇到了一个将一个图片按照相框进行裁剪的问题,花了一个下午研究了下,在此整理一下 ...