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

叁歲伎倆 2022-05-30 09:42 262阅读 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>

效果截图：

![20180309134947961][]

后端代码：

<?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));
        }

[20180309134947961]: /images/20220530/71656128e35a4196bf72b47d09aeec0a.png