首页 > 代码库 > Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

2024-07-17 06:16:14   224人阅读

前端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=http://www.mamicode.com/‘" + a + "‘ /> <input type=‘text‘ value=http://www.mamicode.com/‘"+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

<?phpif(unlink($_POST["a"])){    echo "文件删除成功！";}else{    echo "文件删除失败！";}?>

 


联系
我们