基于Ajax+PHP的单文件、多文件异步上传实例

最新推荐文章于 2021-10-10 11:52:29 发布

sensus森森

最新推荐文章于 2021-10-10 11:52:29 发布

阅读量3.1k

点赞数 2

分类专栏： PHP HTML4/HTML5 jQuery 文章标签：多文件异步上传 ajax

本文链接：https://blog.csdn.net/qq_27682041/article/details/79495541

版权

PHP 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

HTML4/HTML5

30 篇文章 0 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>基于Ajax+PHP的单文件、多文件异步上传实例</title>
        <style>
            #toUploaded span{
                display: block;
            }
        </style>
    </head>
    <body>
        <form id= "uploadForm">  
            <p >待上传文件名： <span id="toUploaded"></span>  
            <p >多文件上传文件： <input type="file" name="file" id="file1" multiple/></p> 
            <p >单文件上传文件： <input type="file" name="file" id="file2" /></p> 
            <p >单文件上传文件： <input type="file" name="file" id="file3" /></p>  
            <input type="button" value="上传" onclick="doUpload()" />  
        </form>

        <script src="jquery-1.11.2.min.js"></script>
        <script>
            $(function(){
                $('input[name="file"]').change(function(event) {
                    if($(this).attr('multiple') == 'multiple'){//多文件上传
                        var filePaths = $(this)[0].files;
                        $('.file_multiple').remove();//重选时，删掉原来已选的
                        for(var i = 0;i < filePaths.length; i++){  
                            if(filePaths[i].name){
                                $('#toUploaded').append("<span class='file_multiple'>" + filePaths[i].name + "</span>");
                            }
                        }
                    }else{//单文件上传
                        var val = $(this).val();
                        if(val){
                            var id = $(this).attr('id');
                            $('.' + id).remove();//重选时，删掉原来已选的
                            $('#toUploaded').append("<span class='"+ id +"'>" + val.substr(val.lastIndexOf('\\')+1) + "</span>");
                        }
                    }
                });
            })
            function doUpload() {  
                var formData = new FormData();
                //知识拓展
                //  jquery选择器 $(#id) 返回的是jquery对象，用document.getElementById( id )返回的是DOM对象。
                // （1）jquery对象可以使用两种方式转换为DOM对象， [index]和.get(index)
                //  $(#id)[0]   得到DOM对象
                //  $(#id).get( 0 )   -----》  DOM对象
                // （2）DOM对象转成jquery对象：
                //  $(DOM对象）
                var files = $("#file1")[0].files;//等价于document.getElementById("file1").files;  
                for(var i = 0; i < files.length; i++){  
                    formData.append("fileupload[]",files[i]);   // 文件对象 ,fileupload必须加中括号   
                }  
                formData.append("fileupload[]", $('#file2')[0].files[0]);
                formData.append("fileupload[]", $('#file3')[0].files[0]);
                $.ajax({  
                    url: 'upload.php' ,  
                    type: 'post',  
                    data: formData,  
                    cache: false,
                    processData: false,
                    contentType: false,
                    async: false,
                    dataType: 'json',
                    success : function (data) {
                        if (data.code == 200) {
                            console.log(data.msg);
                        } else {
                            console.log(data.msg);
                        }
                    }
                })
            }
        </script>
    </body>
</html>

效果截图：

后端代码：

<?php
    $tmp_name = $_FILES['fileupload']['tmp_name'];
    for($i = 0;$i < count($tmp_name);$i++){
        $file = md5(uniqid().rand(1111,9999));
        $name = $_FILES['fileupload']['name'];
        list($f_name,$f_ext) = explode('.', $name[$i]);
        if(is_uploaded_file($tmp_name[$i])){
            $filename = './'.$file.'.'.$f_ext;
            $return = move_uploaded_file($tmp_name[$i],$filename);
            !$return && output('400',$name[$i].'上传失败！');
        }else{
            output('555','非法文件！');
        }
    }
    
    $return ? output('200','上传成功！',['filename' => $filename]) : output('400','上传失败！');

    function output($code,$msg,$datas = array()){
        $outputData = array(
            'code' => $code,
            'msg' => $msg, 
            'datas' => $datas 
        );
        exit(json_encode($outputData));
    }

sensus森森

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
基于Ajax+PHP的单文件、多文件异步上传实例

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>基于Ajax+PHP的单文件、多文件异步上传实例</title> <style> #toUpl...
复制链接

扫一扫

专栏目录