jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳
本文實(shí)例為大家分享了jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳的具體代碼,供大家參考,具體內(nèi)容如下
一,利用js實(shí)現(xiàn)上傳圖片時(shí),實(shí)時(shí)預(yù)覽相關(guān)代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>預(yù)覽選擇的圖片</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; /** * 顯示選擇的文件預(yù)覽 * @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('請(qǐng)選擇圖片'); } } /** * 判斷文件是否是圖片 * @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]); //添加圖片信息的參數(shù) 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,// 不處理數(shù)據(jù) contentType: false, // 不設(shè)置內(nèi)容類型 success: function (mes) { if(mes.status == 1){ msg_alert(mes.message,mes.url); }else{ msg_alert(mes.message); } } });
三、ThinkPHP上傳文件相關(guān)代碼
//圖片上傳 $upload = new \Think\Upload();// 實(shí)例化上傳類 $upload->maxSize = 3145728 ;// 設(shè)置附件上傳大小 $upload->exts = array('jpg','jpeg','png','gif');// 設(shè)置附件上傳類型 $upload->rootPath = './Uploads/'; // 設(shè)置附件上傳根目錄 $upload->savePath = 'ewm_img/'; // 設(shè)置附件上傳(子)目錄 // 上傳文件 $info = $upload->upload(); if(!$info) {// 上傳錯(cuò)誤提示錯(cuò)誤信息 echo $upload->getError() exit; } echo '文件上傳目錄為:/Uploads/'.$info['file']['savepath'].$info['file']['savename'];
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用jQuery加載html頁面到指定的div實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jQuery?獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)
這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作,包括固有屬性的獲取與設(shè)置,自定義屬性的獲取與設(shè)置等等,走進(jìn)?jQuery?的更深層次階段,這也是腳本之家小編發(fā)現(xiàn)的一篇比較實(shí)用的文章2023-06-06jquery表單對(duì)象屬性過濾選擇器實(shí)例分析
這篇文章主要介紹了jquery表單對(duì)象屬性過濾選擇器,實(shí)例分析了jQuery選擇器的相關(guān)使用技巧,需要的朋友可以參考下2015-05-05jquery代碼實(shí)現(xiàn)多選、不同分享功能
這篇文章主要介紹了jquery代碼實(shí)現(xiàn)多選、不同分享功能,需要的朋友可以參考下2015-07-07jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件,該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù) 效果實(shí)現(xiàn)
這篇文章介紹了用jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù)的效果,有需要的朋友可以參考一下2013-07-07jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局【推薦】
本文主要介紹了jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局的實(shí)例,代碼簡(jiǎn)單,容易修改。下面跟著小編一起來看下吧2017-03-03