前端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. zf-分页后台代码

    java : public ResultPage getDeptList(int page, int pageRows) throws Exception { String hql="fro ...

  2. Beam me out!

    Beam me out! 题目描述 King Remark, first of his name, is a benign ruler and every wrongdoer gets a second ...

  3. socket常见几种异常

    第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发生在服务器端进行newServerSocket(port)(po ...

  4. HDU 4738 Caocao's Bridges（割边）

    乍一看一个模板题,仔细一看还是模板题,但是三个坑.1,不是连通图,放0个.2 守卫为0,放1个. 3注意重边. #include<iostream> #include<cstdio& ...

  5. hahah

    ۣۣۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖ ...

  6. Codeforces 691A Fashion in Berland

    水题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #includ ...

  7. java设计原则：16种原则

    一   类的设计原则   1 依赖倒置原则-Dependency Inversion Principle (DIP) 2 里氏替换原则-Liskov Substitution Principle (L ...

  8. LDA,PCA阅读资料

    1,线性判别分析(Linear Discriminant Analysis)(一) 2,机器学习中的数学(4)-线性判别分析(LDA), 主成分分析(PCA) 3,Machine Learning i ...

  9. XAMPP命令之LAMPP

    .wiz-todo, .wiz-todo-img {width: 16px; height: 16px; cursor: default; padding: 0 10px 0 2px; vertica ...

  10. TCP/IP模型各个层次的功能和协议

      层次名称 功    能 协    议 应用层 (Application Layer) 负责实现一切与应用程序相关的功能,对应OSI参考模型的上三层 FTP(文件传输协议) HTTP(超文本传输协议 ...