前端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. 32位Intel CPU所含有的寄存器

    4个数据寄存器(EAX.EBX.ECX和EDX)2个变址和指针寄存器(ESI和EDI) 2个指针寄存器(ESP和EBP)6个段寄存器(ES.CS.SS.DS.FS和GS)1个指令指针寄存器(EIP) ...

  2. AFHTTPSessionManager

    // 取消所有请求 [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; 使用场景: 比如一个界面有下拉刷新和上拉加载两 ...

  3. ueditor 文本编辑器

    百度编辑器       压缩包在文件里 百度UEditor编辑器使用教程与使用方法 发布时间:2014-08-23 14:23:34.0 作者:青岛做网站 我们在做网站的时候,网站后台系统一般都会用到 ...

  4. js 关键字 in

    对于数组 ,迭代出来的是数组元 素,对于对象 ,迭代出来的是对象的属性: var x var mycars = new Array() mycars[0] = "Saab" myc ...

  5. [转]探究java IO之FileInputStream类

    使用FileInputStream类创建的InputStream对象可以用于从文件读取内容.两个常用的构造函数如下所示: ? 1 2 FileInputStream(String filePath) ...

  6. 深入解析FileInputStream和FileOutputStream

    http://swiftlet.net/archives/1363 FileInputStream和FileOutputStream类属于字节类,可以操作任意类型的文件.在数据流的处理过程中,有两种情 ...

  7. Windows、Linux -- 远程登录、文件传输、文件共享

    Linux  <--->  Linux 远程登录: ssh服务 ssh root@10.20.62.124 文件传输: scp服务 上传  scp /home/xxx.txt root@1 ...

  8. Oracle Sql优化之日期的处理

    1.时,分,秒,年,月,日等日期的常用取值方法 select hiredate, to_number(to_char(hiredate,'hh24')) 时, to_number(to_char(hi ...

  9. Chapter 1 First Sight——20

    After two classes, I started to recognize several of the faces in each class. 两节课之后,我开始记住了每节课的那几张脸. ...

  10. ASP.NET WEB开发，实现上传图片

    protected void btnUp_Click(object sender, EventArgs e) { Boolean fileOK = false; String path = Serve ...