jQuery+ThinkPHP實現(xiàn)圖片上傳
更新時間:2020年07月23日 16:56:29 作者:IceFlame31
這篇文章主要為大家詳細介紹了jQuery+ThinkPHP實現(xiàn)圖片上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery+ThinkPHP實現(xiàn)圖片上傳的具體代碼,供大家參考,具體內容如下
一,利用js實現(xiàn)上傳圖片時,實時預覽相關代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>預覽選擇的圖片</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <input type="file" onchange="showSelectedImages(this.files)" id="uploadInput"> <br/> <div id="fileList"></div> </body> <script> window.URL = window.URL || window.webkitURL; /** * 顯示選擇的文件預覽 * @param {[type]} files 選擇的文件 */ function showSelectedImages(files) { var fileList = document.getElementById('fileList'); if (isImageByType(files[0].type)) { var img = '<img src="' + window.URL.createObjectURL(files[0]) + '" style="width:200px;">'; $('#fileList').html(img); }else{ alert('請選擇圖片'); } } /** * 判斷文件是否是圖片 * @param {[type]} fileType 文件 * @return {Boolean} */ function isImageByType(fileType) { return fileType.indexOf("image") < 0 ? false : true; } </script> </html>
二、利用jQuery的Ajax上傳圖片表單
var formData = new FormData(); formData.append('file', $('#uploadimg')[0].files[0]); //添加圖片信息的參數 formData.append("ewmclass",ewmclass); formData.append("uname",uname); formData.append("skaccount",skaccount); $.ajax({ url: "/User/ewmup", type: "post", dataType: "json", cache: false, data: formData, processData: false,// 不處理數據 contentType: false, // 不設置內容類型 success: function (mes) { if(mes.status == 1){ msg_alert(mes.message,mes.url); }else{ msg_alert(mes.message); } } });
三、ThinkPHP上傳文件相關代碼
//圖片上傳 $upload = new \Think\Upload();// 實例化上傳類 $upload->maxSize = 3145728 ;// 設置附件上傳大小 $upload->exts = array('jpg','jpeg','png','gif');// 設置附件上傳類型 $upload->rootPath = './Uploads/'; // 設置附件上傳根目錄 $upload->savePath = 'ewm_img/'; // 設置附件上傳(子)目錄 // 上傳文件 $info = $upload->upload(); if(!$info) {// 上傳錯誤提示錯誤信息 echo $upload->getError() exit; } echo '文件上傳目錄為:/Uploads/'.$info['file']['savepath'].$info['file']['savename'];
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用jQuery加載html頁面到指定的div實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery?獲取與設置元素屬性的詳細方法(看完這篇文章就搞明白了)
這篇文章帶領大家熟練掌握?jQuery?的屬性方面的操作,包括固有屬性的獲取與設置,自定義屬性的獲取與設置等等,走進?jQuery?的更深層次階段,這也是腳本之家小編發(fā)現(xiàn)的一篇比較實用的文章2023-06-06jQuery實現(xiàn)Twitter的自動文字補齊特效
本文介紹了一款jQuery實現(xiàn)的文字自動補全特效的插件,該插件可以結合本地數據進行一些操作。推薦關注一下H5的幾種數據存儲的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數 效果實現(xiàn)
這篇文章介紹了用jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數的效果,有需要的朋友可以參考一下2013-07-07