Asynchronous Upload Picture-ajaxSubmit Submit Submit

Asynchronous upload is a painful problem. Today, let's talk about asynchronous upload

The first step is to introduce ajaxSubmit, a js plugin

<!--Submit pictures asynchronously-->
    <script src="__PUBLIC__/js/jquery.ajaxSubmit.js"></script>

Start page processing at this time

 <input type="file" id="file" name="b_head" class="col-xs-6 ttee" onchange="changePhoto();" style="display: none"  />
                           <label for="file">
                               <img <if condition="$data.user_b_head neq ''">src="upload/{$data.user_b_head}"<else/>src="__PUBLIC__/image/ic_upload.png"</if>  id="new_pic"  alt="" class="col-xs-6 img-responsive"/>
                           <input type="hidden" name="user_b_head" id="head"/>

Tell me about file associations in img tags, clicking on img pictures triggers file to select files

Start js processing

        $(".ttee").click(function () {
            $(this).wrap("<form id='addPic' method='post' action="+"{:U('upload')}"+" enctype='multipart/form-data'></form>");
        function changePhoto() {


It's not ugly here to wrap a form form around your parent when you click

Trigger time for plugin submission when picture selection is complete

This is to remove the form form form

Background reception is the same as usual

I'm writing it here in tp

//Upload pictures
    public function upload(){
        $file = $this->setUpload($_FILES['b_head']);
        $src =  $file['savepath'].$file['savename'];
        $data['src'] = $src;
        //Insert data
        $id = M('picture')->add(array('path'=>$src));
        $data['id'] = $id;
        echo json_encode($data);
    //Upload pictures
    private function setUpload($file){
        header("Content-Type: text/html;charset=utf-8");
        $upload = new \Think\Upload();// Instantiate Upload Class
        $upload->maxSize   =     3145728 ;// Set attachment upload size
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// Set attachment upload type
        $upload->rootPath  =     './upload/'; // Set attachment upload root directory
        $upload->savePath  =     date("Y",time())."/".date("m",time())."/".date("d",time())."/"; // Set up attachment upload (sub) directory
        // Upload Files
        $info   =   $upload->uploadOne($file);
        if(!$info) {// Upload Error Prompt Error Information
        }else{// Upload Successful
            return $info;
This completes the asynchronous upload of pictures. Welcome to comment. A private blog is still under construction

Tags: JSON JQuery

Posted on Fri, 05 Jun 2020 12:22:39 -0400 by wannasub