1、基於TP3.2+ajaxfileupload進行無刷新上傳圖片，本次只上傳一張，多張以后搞出來再發
2、效果：
3、html代碼：
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>ajax上傳文件</title> <style type="text/css"> #con{ width:500px; height:500px; border:1px solid #ddd; margin:50px auto; } #look{ width:300px; height:300px; border:1px solid #aaa; margin:10px auto; text-align: center; line-height:300px; color:#aaa; } #uploadBtn{ display:block; width:100px; line-height:35px; background:#3F9F00; color:#fff; text-align: center; margin:20px auto; cursor:pointer; } </style> </head> <body> <div id="con"> <div id="look">預覽區</div> <span id="uploadBtn">點擊上傳</span> <input type="file" style="display:none;" id="uploadFile" name="uploadFile" onchange="uploadFile()"/> </div> <script type="text/javascript" src="__ROOT__/Public/JS/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="__ROOT__/Public/JS/ajaxfileupload.js"></script> <script type="text/javascript"> $("#uploadBtn").click(function(){ $("#uploadFile").click(); }); function uploadFile(){ var url = "{:U('home/Upload/ajax_uploadPic')}"; $.ajaxFileUpload({ url: url, type: 'post', secureuri: false, //一般設置為false fileElementId: "uploadFile", // 上傳文件的name屬性名 dataType: 'text', //返回值類型，一般設置為json success: function(data){ var imgName=delHtmlTag(data.replace(/\"/g,"")); var imgsrc = "https://m.xxiangfang.com/Uploads/"+imgName;//此處填寫你的圖片存儲地址 var Img = "<img src="+imgsrc+" height='300'width='300'>"; $("#look").html(Img); //寫存儲數據庫邏輯,最好在后台進行存儲 }, error: function(data, status, e){ alert(e); console.log(data); } }); } function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html標記 } </script> </body> </html>
4、后台php：
/** * 實現ajax無刷新上傳圖片 -xzz * 基於TP3.2框架 */ public function ajax_uploadPic(){ $config = array( 'maxSize' => 3145728, 'rootPath' => './Uploads/', 'saveName' => array('uniqid',''), 'exts' => array('jpg', 'gif', 'png', 'jpeg'), 'autoSub' => true, 'subName' => array('',''), ); $upload = new \Think\Upload($config);// 實例化上傳類 $info = $upload->upload(); $path = $info['uploadFile']['savename']; $this->ajaxReturn($path); //這里進行路徑存儲於數據庫 //code }
5、簡單的一個Demo，拿去耍~（JS插件有想要的M我郵箱：857328943@qq.com）