非同步上傳圖片-ajaxSubmit提交
非同步上傳是一個很蛋疼的問題,今天就來說說非同步上傳的故事
第一步 引入ajaxSubmit這個js外掛
<!--非同步提交圖片-->
<script src="__PUBLIC__/js/jquery.ajaxSubmit.js"></script>
這時候開始頁面處理
<input type="file" id="file" name="b_head" class="col-xs-6 ttee" onchange="changePhoto();" style="display: none" /> <label for="file"> <img <if condition="$data.user_b_head neq ''">src="upload/{$data.user_b_head}"<else/>src="__PUBLIC__/image/ic_upload.png"</if> id="new_pic" alt="" class="col-xs-6 img-responsive"/> </label> <input type="hidden" name="user_b_head" id="head"/>
講file檔案關聯到img標籤裡面,點選img圖片就能觸發file進行選擇檔案
開始js處理
<script> $(".ttee").click(function () { $(this).wrap("<form id='addPic' method='post' action="+"{:U('upload')}"+" enctype='multipart/form-data'></form>"); }); function changePhoto() { $('#addPic').ajaxSubmit({ dataType:'json', success:function(data){ $('.ttee').unwrap(); $('#new_pic').attr('src',"upload/"+data.src); $("#head").val(data.id); }, error:function(err){ $('.ttee').unwrap(); console.log(JSON.stringify(err)); } }) } </script>
這裡不難看的出來 在點選的時候給父級包裹一層form表單
當圖片選擇完時候觸發時間 進行外掛的提交
$('.ttee').unwrap();
這個則是進行移除form表單
後臺接收和平常是一樣一樣的
我這裡是用tp寫的
這樣 非同步上傳圖片就完事了,歡迎評論,私人部落格還在建設當中//上傳圖片 public function upload(){ $file = $this->setUpload($_FILES['b_head']); $src = $file['savepath'].$file['savename']; $data['src'] = $src; //進行資料插入 $id = M('picture')->add(array('path'=>$src)); $data['id'] = $id; echo json_encode($data); } //上傳圖片 private function setUpload($file){ header("Content-Type: text/html;charset=utf-8"); $upload = new \Think\Upload();// 例項化上傳類 $upload->maxSize = 3145728 ;// 設定附件上傳大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別 $upload->rootPath = './upload/'; // 設定附件上傳根目錄 $upload->savePath = date("Y",time())."/".date("m",time())."/".date("d",time())."/"; // 設定附件上傳(子)目錄 // 上傳檔案 $info = $upload->uploadOne($file); if(!$info) {// 上傳錯誤提示錯誤資訊 $this->success($upload->getError());exit; }else{// 上傳成功 return $info; } }
www.poison2016.cn
相關推薦
非同步上傳圖片-ajaxSubmit提交
非同步上傳是一個很蛋疼的問題,今天就來說說非同步上傳的故事 第一步 引入ajaxSubmit這個js外掛 <!--非同步提交圖片--> <script src="__PUBLIC__/js/jquery.ajaxSubmit.js">&l
使用ajaxSubmit非同步上傳圖片並展示
頁面在選擇圖片完成後將圖片上傳到圖片伺服器,並在頁面顯示圖片,然後將上傳圖片的路徑載入到隱藏域中,提交表單時將路徑儲存到資料庫。 頁面程式碼: <script> function sub
ajaxFileUpload 非同步上傳圖片 使用說明
首先引入 相應的jquery <script src="script/jquery-1.7.1.min.js"></script> <script src="script/ajaxfileupload.js"></script>
js 實現非同步上傳圖片+預覽
兩種js實現方式,一種用原生的ajax;另一種用JQuery,例子比較簡單,直接上程式碼。 <!DOCTYPE html> <html> <head> <title>Title</title> <link h
thinkPHP利用ajax非同步上傳圖片並顯示、刪除
近來學習tp5的過程中,專案中有個發帖功能,選擇主題圖片。如下: 利用原始的檔案上傳處理,雖然通過原始js語句能實時顯示上傳圖片,但是這樣的話會涉及很多相容問題。使用ajax技術,實現選擇性刪除所選圖片功能,並不會有相容問題。 表單檔案form: <form method="po
使用jsJdk非同步上傳圖片至OSS伺服器
阿里雲官方文件中給的基本都是同步上傳檔案的DEMO,可能是非同步的比較簡單,但是由於自己JS基礎還不夠牢固,在學習使用的時候也很鬧心,因為老是看著看著就看到非同步的那邊去了。將自己寫好的的一個DEMO放於部落格中,萬一能夠幫助到任何一個和我一樣的朋友也是好的。 <!DOCTYPE html&
AJAX非同步上傳圖片(TP5)
php程式碼: /** * 上傳 */ public function upload_photo(){ $file = $this->request->file('file'); $uid = se
ajax實現非同步上傳圖片
圖片上傳並回顯是一個最基本的功能,本文只簡單實現了一個demo,並沒有進行復雜的判斷,簡單記錄下操作流程:js中用到了Formdata:FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料,但亦可用於傳送帶鍵資料(keyed data)。如果表單en
tp5非同步上傳圖片到七牛雲,就是那麼簡單
1. 一個非同步上傳的外掛uploadify 在html中引入uploadify的js和css檔案。 tp5中如 html如下: javascript呼叫程式碼如下: 2.用七牛雲端儲存圖片封裝 對於qiniu類庫的下載,一是通過com
Ajax(使用 jQuery,php)非同步上傳圖片(二進位制流)儲存到新浪雲平臺storage
這兩天實現了一個釋出圖片的功能,可謂是一波三折,bug不斷啊,趁剛搞定,趕緊把過程寫下來,順便把程式碼傳過來。記錄了圖片在本地的儲存和 將本地的圖片以二進位制流提交到後臺php檔案 在html檔案中的操作自然就是在表單form元素中新增屬性 enctype="multi
TP 5 上傳圖片回顯 (AJAX非同步上傳圖片TP5)
直接上程式碼 PHP程式碼如下 /** * 上傳 */ public function upload_photo(){ $file = $this
tp5使用layui非同步上傳圖片
上傳檔案任何地方都要用到,這篇文章介紹使用layui非同步上傳圖片。 1.檢視程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
thinkphp+ajaxfileupload 非同步上傳圖片
藉助外掛實現非同步上傳圖片的,需要引用Jquery。 HTML: <a onclick="selectImg(this)">照片</a> <input type="file" id="file{$voc.id}" name="file{$vo
利用formdata非同步上傳圖片並預覽圖片
<img src="" style="width: 120px;margin-bottom: 5px" id="previewimg0"> <form action="" enctype="multipart/form-data" id="form0"> <input
ajax非同步上傳圖片程式碼案例
html程式碼如下: <div class="form-group" style="width:60%;"> <table class="table"> <thead>
uploadify結合ThinkPHP5上傳類實現非同步上傳圖片
注:我們使用的是免費的Flash版本①引入必需的檔案jQueryjquery.uploadify-3.1.min.jsuploadify.css②HTML元素的搭建(結合bootstrap)<div class="form-group"> <labe
spring mvc+ajaxfileupload 實現非同步上傳圖片
1.匯入包引入js 匯入spring包以及如下包 <dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><ve
移動web非同步上傳圖片
ajax-upload-image.mobile 簡介 進行移動web開發時,圖片上傳功能基本都會使用到。實現雖然說難度不大,但自己還是會遇到很多小坑。寫了一個demo(可正常使用,demo只有
MVC非同步上傳圖片
今天聽黑馬訓練營就業班的MVC課程,馬老師在非同步上傳圖片這裡卡住了半天,多次除錯都無法在後臺控制器獲得圖片。 下面直接寫出MVC中檔案上傳方法。 1.控制器 public ActionResult
WebUploader 上傳圖片並提交表單(一)
WebUploader 是由百度開發的一個上傳檔案的框架,簡單上傳檔案可以檢視官網的兩個demo。 由於自己需要上傳使用者資訊,和使用者照片,直接使用官網的demo,只能得到圖片,於是花了一下午時間研究了一下WebUploader。 首先簡單說明一下WebU