php、jquery lavarel多图片无刷新上传功能的实现

views/xxx/add.blade.php
html代码:



[mw_shl_code=javascript,true]<div class="form-group">
    <label for="">商品多图</label>
    <input type="file"  id="uploads1" multiple="multiple"  style="display:none">
    <br>
    <input type="hidden" name="img1" id="goodImg1" value="">
    <input type="button" value="上传">
    <input type="button"  value="选择文件">
    <div id="main1">
        <img style="width:180px" src="/uploads/goods/" alt="">
    </div>
</div>
[/mw_shl_code]


javascript代码:


[mw_shl_code=javascript,true]function check1() {
    $("#uploads1").click();
    $("#uploads1").on("change", function (e) {
        var files = e.target.files;
        var imgs = "";
        // console.log(e.target.files[0].name);
        if(files) {            
            for (var i = 0; i < files.length; i++) {
                var reader = new FileReader();
                <!-- formData.append("file[]", files); -->
                reader.readAsDataURL(e.target.files);
                <!-- console.log(e.target.result); -->
                reader.onload = function(e) {
                    imgs += "<img style=\"width:180px;\" alt=\""+e.target.result+"\" src=\""+e.target.result+"\"/>";
                    $("#main1").html(imgs);
                }
            }                     
        }   
    });
}
<!-- Ajax上传 -->
function upload1(){
    var fileInput = document.getElementById("uploads1");
    var files = fileInput.files
    if(files && files[0]) {
        var formdata = new FormData();
        for (var i = 0; i < files.length; i++) {
            formdata.append("file[]", files);
        }
        formdata.append("_token", "{{csrf_token()}}");
        formdata.append("direct", "goods");
        $.ajax({
            url:"/admin/shangchuan",
            type:"post",
            data:formdata,
            cache: false,
            processData: false,
            contentType: false,
            success:function(data){
                imgs = "";
                console.log(data);
                if(data){
                    for(var i = 0; i < data.length; i++) {
                        imgs+="<img width='180px'  src='/uploads/goods/"+data+"'>";
                    }
                    $("#main1").html(imgs);
                    $("#goodImg1").val(data);
                }
            },
            error:function(data){
                alert("上传失败")
            }
        });
    }
}
[/mw_shl_code]


controller/xxx/CommonController.php 中的上传方法 upload（）
php代码:

---

[mw_shl_code=php,true]public function upload(Request $request){
    // 接收上传的文件
    $files=$request->file('file');
    // 接收上传的目录名
    $dir = $request->input('direct');
    // 上传单个文件时的处理
    if(gettype($files)=='object'){
        if ($files->isValid()) {
            $ext = $files->getClientOriginalExtension();
            $newFile = time() . rand() . '.' . $ext;
            $files->move('./uploads/' . $dir, $newFile);
            return $newFile;
        }
    }
    // 创建上传的目录名
    if (!file_exists("./uploads/{$dir}")) {
        mkdir("./uploads/{$dir}", 0777, true);
    }
    // 处理上传的多个文件
    $uploadedFiles = [];
    $i = 0;
    foreach ($files as $file) {
        
        if ($file->isValid()) {
            $ext = $file->getClientOriginalExtension();
            $newFile = time() . rand() . '.' . $ext;
            $file->move('./uploads/' . $dir, $newFile);
            $uploadedFiles[] = $newFile;
        }
    }
    return $uploadedFiles;
}[/mw_shl_code]