Ajax + tp5 multi-file upload and processing

Foreword

Sometimes we might encounter such a demand: to be a user's dynamic publishing capabilities, users can write some content and upload multiple pictures.

For example, like this:

Under the premise of providing the user with a better interactive experience, we can only choose to use the Ajax.

achieve

HTML code

<form enctype="multipart/form-data">
    <input type="text" id="content" name="content">
    <!-- 多文件上传 -->
    <input type="file" name="upload" id="upload" multiple>
　　<button type="button" onclick="uploadHandle">提交</button>
</form>

MDN FormData Introduction

FormData Interface provides a way of showing the key configuration of the form data, through which data can be used XMLHttpRequest.send () method of delivery, so we may submit a request Ajax.

FormData.append () method to FormDataadd a new attribute value, FormDatathe presence of the corresponding property value will not overwrite the original value, but a new value, if the attribute does not exist, a new attribute value.

JS code

<Script>
     var imgFiles = []; // to upload images 
    $ ( '# Upload') Change (. function () { 
        the let F = the this .files;
         / * * 
         * the TODO: 
         * 1. can upload pictures and limiting the number of image formats 
         * 2 image preview 
         * / 
        for (the let of Item F) { 
            the console.log (Item); 
            imgFiles.push (Item); 
        } 
        // solve the problem the same picture can not upload 
        the this .Value = null ; 
    }); 

    function uploadHandle () { 
        the let form = new new the FormData ();
        form.append('content', $('#content').content.val());

        $.each(imgFiles, function ( i, file ) {
            form.append('files[]', file);
        });
        submitHandle(form);
    }

    function submitHandle(formData) {
        $.ajax({
            type: 'post',
            url: '',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,

            success: function (msg) {
                console.log(msg);
            },
        });
    }
</script>

Here points to note:

the processData :( default: true) By default, data passed in through the option data, if an object (if not technically a string), the processing will be transformed into a query string to match the default content type "application / x-www-form-urlencoded " . If you want to send a DOM tree information or other information do not wish to convert, set to false. These are described Jquery API documentation, here is a FormData our data objects, we do not want to do data processing.
contentType :( Default: "application / x-www- form-urlencoded") transmits information to the server when the content encoding type. Because it is constructed from form form FormDatathe object, and has been declared attribute enctype = "multipart / form-data ", it is here set to false. Of course, we can also directly set contentType: "multipart / form-data ".

Background Processing

Receive data

// tp5（ThinkPHP)
$conent = $this->request->post('content');
$files = $this->request->file('files');
// 上传处理
$fileinfo = $this->multipleImgUpload($files);
// TODO

// 原生php
$content = $_POST['content'];
$files = $_FILES['files'];

Handle multiple image upload

TP5 // 
// either upload all succeed or fail 
public  function multipleImgUpload ( $ Files ) 
{ 
    $ Flag = to true ;
     foreach ( $ Files  AS  $ Item ) {
         IF ( $ Item ) {
             $ the Upload = $ Item -> the validate ([ 'size' => 10 * 1024 * 1024, 'EXT' => 'JPG, JPEG, PNG']) -> Move (APP_PATH '../public/uploads/'. );
             IF ( $ Upload ) { // Upload successful 
                $ save_path . = '/ uploads /' $ the Upload ->getSaveName();
                $img_src[] = $save_path;
            } else {
                $data = ['code' => 0, 'save_path' => '', 'msg' => $item->getError()];
                $flag = false;
            }
        } else {
            $data = ['code' => 0, 'save_path' => '', 'msg' => '文件未上传'];
            $flag = false;
        }
        if ( !$flag ){
            break;
        }
    }
    if ( $flag ){
        $data = ['code'=>1, 'save_path'=>$img_src, 'msg'=>''];
    }

    return $data;
}