利用FormData文件ajax上传

2016-01-16

20160116

markdown写文

从不用百度Ueditor之后一直是用一个简单的textarea写内容。总是要先用ftp把图片上传到服务器,再按照markdown的语法贴图片,现在之后写了个简易的markdown编辑器,给textarea增加了一个图片上传和设置链接的按钮,以后用这两个内容的时候就能简单些了。

FormData

其中图片上传使用到FormData:

前端展示

表单

jquery处理

45 function uploadImage() { 46 var content=$('textarea[name=\'content\']').val(); 47 var formData=new FormData; 48 var imageAlt=$('input[name=\'image-alt\']').val(); 49 formData.append('image',$('input[name=\'image\']')[0].files[0]); 50 formData.append('imageAlt',imageAlt); 51 var url='/upload'; 52 $.ajax({ 53 url:url, 54 type:'POST', 55 data:formData, 56 processData:false,/**重要**/ 57 contentType:false,/**重要**/ 58 success:function(data){ 59 $('textarea[name=\'content\']').val(content+data); 60 } 61 }) 62 return false; 63 }

后端处理

165 public function uploadImage(Request $request) { 166 $image=$request->file('image'); 167 $imageAlt=$request->input('imageAlt'); 168 $path=$_SERVER['DOCUMENT_ROOT'].'attached/'; //图片存储目录 169 $type=$image->getMimeType();//获取图片后缀 170 $type=explode('/',$type); 171 $date=time(); 172 $name=$date.'.'.$type[1];//图片名称 173 if($image->getError()>0){ 174 return '0'; 175 }else { 176 $image->move($path,$name);//储存图片 177 $imageUrl='http://'.$_SERVER['SERVER_NAME'].'/attached/'.$name; 178 } 179 $result='!['.$imageAlt.']('.$imageUrl.')'; 180 return $result; 181 }

75 查看