前端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优化__rownum的使用【转】

    ROWNUM的概念ROWNUM是一个虚假的列.它将被分配为 1,2,3,4,...N,N 是行的数量.一个ROWNUM值不是被永久的分配给一行 (这是最容易被误解的).表中的某一行并没有标号:你不可以 ...

  2. struts2的工作原理

    在学习struts2就必须的了解一下它的工作原理: 首先来看一下这张图 这张工作原理图是官方提供的: 一个请求在Struts2框架中的处理大概分为以下几个步骤 1.客户端初始化一个指向Servlet容 ...

  3. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  4. Newly Setting up a CentOS-7 system

    yum install -y epel-release glibc.i686 libtools vim clang git autoconf automake w3m glibc screen the ...

  5. php 后台权限例子 （mysql 数据表）

    说明   超级管理员的权限最高   可以操作所有的功能   !!!      超级管理员给特定的用户分配对应的权限 下文注解:   用户表 关联 用户组表  每个用户组对应特定的功能权限    !! ...

  6. Win7下安装配置Java

    1 安装JDK java.sun.com 下载  Java SE Development Kit 2 配置环境变量 变量名:JAVA_HOME 变量值:C:\Program Files (x86)\J ...

  7. Linux学习 -- Shell编程 -- 字符处理命令

    sort排序命令 sort [选项] 文件名 -f 忽略大小m写 -n 按数值型,默认字符串型 -r 反向 -t 指定分隔符 -k n[,m] 指定字段范围,默认行尾 eg. sort -n -t & ...

  8. Effective java -- 4 泛型

    第二十三条:请不要在代码中使用原生态类型就是像Set这种待泛型的,就把泛型明确写出来. 第二十四条:消除非受检警告就是Set<String> sets = new HashSet();这种 ...

  9. 关于DOMContentLoaded

    也许还有朋友不太清楚DOMContentLoaded这个事件.简单的说,这个事件就是要在大多数情况下去替代window.onload事件,因为window.onload事件必须要等待页面所有元素的资源 ...

  10. STL笔记之【map之总概】

    1.map和multimap内部数据结构: 红黑树(平衡二叉树的一种)2.在往map和multimap中插入元素时,会自动进行排序3.map和multimap的所有元素的key都被视为常数,其元素的实 ...