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"/> </label> <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
<script> $(".ttee").click(function () { $(this).wrap("<form id='addPic' method='post' action="+"{:U('upload')}"+" enctype='multipart/form-data'></form>"); }); function changePhoto() { $('#addPic').ajaxSubmit({ dataType:'json', success:function(data){ $('.ttee').unwrap(); $('#new_pic').attr('src',"upload/"+data.src); $("#head").val(data.id); }, error:function(err){ $('.ttee').unwrap(); console.log(JSON.stringify(err)); } }) } </script>
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$('.ttee').unwrap();
Background reception is the same as usual
I'm writing it here in tp
This completes the asynchronous upload of pictures. Welcome to comment. A private blog is still under construction//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 $this->success($upload->getError());exit; }else{// Upload Successful return $info; } }
www.poison2016.cn