Maison > Article > développement back-end > thinkphp(php)+Ajax上传图片
使用的外部插件:
jquery.form.js(表单提交) :http://malsup.com/jquery/form/#download
jquery.json.min.js(解析json数据):http://www.oschina.net/p/jquery-json
表单代码部分:
<code><form tag="<span">"img_file_upload" id=<span>"file_upload"</span> name=<span>"file_upload"</span><span>method</span>=<span>"post"</span> action=<span>""</span> enctype=<span>"multipart/form-data"</span>> <input><span>type</span>=<span>"file"</span> id=<span>"img"</span> name=<span>"file"</span>> <input><span>type</span>=<span>"hidden"</span> name=<span>"member_id"</span><span>value</span>=<span>""</span>/> <input><span>type</span>=<span>"button"</span><span>value</span>=<span>"上传"</span> >"submitImgForm()"/> </form> <img tag="<span" alt="thinkphp(php)+Ajax上传图片" >"show_photo_upload_img" src=<span>""</span> alt=<span>""</span>/></code>
js代码:
<code><span>script</span>><span><span><span>function</span><span>submitImgForm</span><span>()</span>{</span><span>if</span> ($(<span>"#img"</span>).val() == <span>""</span>) { alert(<span>"请选择一个图片文件,再点击上传。"</span>); <span>return</span>; } <span>var</span> file_form = $(<span>"[tag='img_file_upload']"</span>); <span>var</span> show_img = $(<span>"[tag='show_photo_upload_img']"</span>); <span>var</span> options = { type : <span>'post'</span>, url : <span>""</span>, dataType: <span>'text'</span>, contentType: <span>"application/json; charset=utf-8"</span>, beforeSubmit:<span><span>function</span><span>()</span>{</span> alert(<span>'正在上传'</span>); }, success:<span><span>function</span><span>(data)</span> {</span><span>var</span> json_obj = <span>JSON</span>.parse(data); show_img.attr(<span>'src'</span>,json_obj.img_path); alert(json_obj.error); }, error:<span><span>function</span><span>(XmlHttpRequest, textStatus, errorThrown)</span>{</span> alert(textStatus); alert(errorThrown); } }; file_form.ajaxSubmit(options); } </span><span><span>script</span>></span></code>
后台php部分:
<code><span><span>function</span><span>fileUpload</span><span>()</span>{</span><span>$config</span> = C(<span>'FILE_UPLOAD_CONFIG'</span>); <span>//附带的信息</span><span>$request_data</span> = I(<span>'post.'</span>); <span>// show_bug($request_data);</span><span>$member_id</span> = <span>$request_data</span>[<span>'member_id'</span>]; <span>if</span>(<span>empty</span>(<span>$the_file_usage</span>)){ <span>$the_file_usage</span> = <span>$file_usage</span>[<span>'DOWNLOAD'</span>]; } <span>// show_bug_with_exit($file_name);</span><span>$file_info</span>[<span>'member_id'</span>] = <span>$member_id</span>; <span>$file_info</span>[<span>'created_time'</span>] = time(); <span>// 上传文件</span><span>//实例化上传类,传入上面的配置数组</span><span>$uploader</span> = <span>new</span> Upload(<span>$config</span>, <span>'Local'</span>); <span>// $uploader->saveName = $file_uuid;</span><span>$info</span> = <span>$uploader</span>->upload(<span>$_FILES</span>); <span>// show_bug_with_exit($info);</span><span>//这里判断是否上传成功</span><span>if</span> (<span>$info</span>) { <span>//// 上传成功 获取上传文件信息</span><span>foreach</span> (<span>$info</span><span>as</span> &<span>$file</span>) { <span>//拼接出上传目录</span><span>$file</span>[<span>'rootpath'</span>] = __ROOT__ . ltrim(<span>$config</span>[<span>'rootPath'</span>], <span>"."</span>); <span>//拼接出文件相对路径</span><span>$file</span>[<span>'filepath'</span>] = <span>$file</span>[<span>'rootpath'</span>] . <span>$file</span>[<span>'savepath'</span>] . <span>$file</span>[<span>'savename'</span>]; } <span>//这里可以输出一下结果,相对路径的键名是$info['upload']['filepath']</span><span>$filepath</span> = <span>$file</span>[<span>'filepath'</span>]; <span>// show_bug_with_exit($filepath);</span><span>$file_info</span>[<span>'file_path'</span>] = <span>$filepath</span>; <span>$save_file_in_DB</span> = <span>$this</span>->saveFileInfoIntoDB(<span>$file_info</span>); <span>//如果文件数据往数据库中存储失败,则删除文件</span><span>if</span>(!<span>$save_file_in_DB</span>){ unlink(<span>$filepath</span>); <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传失败,请重试'</span>; <span>echo</span> json_encode(<span>$return_data</span>); } <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传成功'</span>; <span>$return_data</span>[<span>'img_path'</span>] = <span>$filepath</span>; <span>$return_data</span>[<span>'img_id'</span>] = <span>$save_file_in_DB</span>; jsonReturn(<span>$return_data</span>); } <span>else</span> { <span>//输出错误信息</span><span>$error_msg</span> = <span>$uploader</span>->getError(); <span>$return_data</span>[<span>'error'</span>] = <span>$error_msg</span>; jsonReturn(<span>$return_data</span>); } } <span><span>function</span><span>saveFileInfoIntoDB</span><span>(<span>$file_info</span>)</span>{</span><span>$file</span> = M(<span>'File'</span>); <span>$rs_u_file</span> = <span>$file</span>->add(<span>$file_info</span>); <span>$file_id</span> = <span>$file</span>->getLastInsID(); <span>if</span>(!<span>$rs_u_file</span>){ <span>return</span><span>false</span>; } <span>return</span><span>$file_id</span>; }</code>
配置文件:
<code><span>'FILE_UPLOAD_CONFIG'</span>=><span>array</span>( <span>'mimes'</span> => <span>''</span>, <span>//允许上传的文件MiMe类型</span><span>'maxSize'</span> => <span>6</span> * <span>1024</span> * <span>1024</span>, <span>//上传的文件大小限制 (0-不做限制)</span><span>'exts'</span> => <span>array</span>(<span>'jpg'</span>, <span>'gif'</span>, <span>'png'</span>, <span>'jpeg'</span>),<span>// 设置附件上传类型</span><span>'autoSub'</span> => <span>true</span>, <span>//自动子目录保存文件</span><span>'subName'</span> => <span>array</span>(<span>'date'</span>, <span>'Y-m-d'</span>), <span>//子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组</span><span>'rootPath'</span> => <span>'./Uploads/'</span>, <span>//保存根路径</span><span>'savePath'</span> => <span>''</span>, <span>//保存路径</span><span>'saveName'</span> => <span>array</span>(<span>'uniqid'</span>,<span>''</span>), ),</code>
function.php文件
<code><span>/** * 返回json格式的数据到客户端 *<span> @access</span> protected *<span> @param</span> mixed $data 要返回的数据 *<span> @return</span> void */</span><span><span>function</span><span>jsonReturn</span><span>(<span>$data</span>)</span>{</span><span>$json_str</span> = json_encode(<span>$data</span>); <span>// 返回JSON数据格式到客户端 包含状态信息</span> header(<span>'Content-Type:application/json; charset=utf-8'</span>); <span>//处理json中包含的‘null’,将其替换成空字符串</span><span>$search</span> = <span>'null'</span>; <span>$replace</span> = <span>'""'</span>; <span>$returndata</span> = str_replace(<span>$search</span>, <span>$replace</span>, <span>$json_str</span>); <span>// testAddDataIntoTestTable(null,$returndata);</span><span>exit</span>(<span>$returndata</span>); }</code>
以上就介绍了thinkphp(php)+Ajax上传图片,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。