前端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. Servlet与jsp间的传值问题

    Servlet与JSP 之间的传值有两种情况:JSP -> Servlet, Servlet -> JSP.通过对象 request和 session (不考虑 application)完 ...

  2. c++内存流

    1.MemoryStream.h文件内容 ifndef _MEM_STREAM_H_ #define _MEM_STREAM_H_ #include <string> class CMem ...

  3. jave学习1--基础介绍

    java 技术主要分为三个部分: jave SE基础知识. 对于各个程序的开发语言都包含的基本数据类型,循环控制,数组,方法等. jave SE的面向对象部分. 所有的面向对象的概念,为最终的接口准备 ...

  4. MyBaits 错误分析

    错误原因:在DAO的映射文件中,在映射标签中的type类型写成DAO类了,应该写成javaBean

  5. 自定义开关ToggleButton

    package com.example.test;import android.os.Bundle;import android.app.Activity;import android.view.Me ...

  6. linux下安装rabbitmq

    1.安装erlang虚拟机 Rabbitmq基于erlang语言开发,所有需要安装erlang虚拟机.安装erlang有两种方式: 第一种:使用yum安装: wget -O /etc/yum.repo ...

  7. asp 正则替换函数

    Function RegExpTest(patrn,str1,strng) Dim regEx',str1 ' 建立变量 'str1 = "The quick brown fox jumpe ...

  8. PAT1016

    A long-distance telephone company charges its customers by the following rules: 一个长途电话公司费用告诉它的顾客需要遵循 ...

  9. [学习opencv]高斯、中值、均值、双边滤波

    http://www.cnblogs.com/tiandsp/archive/2013/04/20/3031862.html [学习opencv]高斯.中值.均值.双边滤波 四种经典滤波算法,在ope ...

  10. EF开发程序经常用的几个东西

    PM> Install-Package EntityFramework PM> Install-Package AutoFac PM> Install-Package AutoMap ...