不重新整理頁面的PHP與Jquery AJAX檔案上傳
這裡只拿圖片上傳做例子:
前端頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>多檔案上傳</title> </head> <body> <input id= "formfiles" type="file" multiple /> <br /> <button id="sub_btn">提交</button> </body> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/form.js"></script> </html>
js程式碼
PHP程式碼$(document).ready(function(){ $('#sub_btn').click(function(){ var pic_data = new FormData(); var filenum = $('#formfiles').get(0).files.length; for(var i = 0; i < filenum; i++){ pic_data.append(i,$('#formfiles').get(0).files[i]); } $.ajax( { url:"./uploads.php", type: "POST", processData:false, contentType:false, data:pic_data, success:function(data){ alert(data); } } ); }); });
<?php $file = $_FILES; $num = count($file); $result =''; for($i=0;$i<$num;$i++){ if(is_uploaded_file($file[$i]['tmp_name'])){ $allowExt = array("image/png","image/gif","image/jpeg","image/jpg"); if(!in_array($file[$i]['type'],$allowExt)){ echo "不允許的型別<br />"; continue; } $path = "./uploads/"; $fname = date('YmdHis').rand(1000,9999); $ext = array_pop(explode('.',$file[$i]['name'])); $newFile = $path.$fname.'.'.$ext; if(move_uploaded_file($file[$i]['tmp_name'],$newFile)){ $n = $i + 1; $result = $result. "上傳第{$n}張圖片成功|"; }else{ $n = $i + 1; $result = $result."上傳第{$n}張圖片失敗|"; } } } echo $result;
相關推薦
不重新整理頁面的PHP與Jquery AJAX檔案上傳
這裡只拿圖片上傳做例子: 前端頁面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>多檔案上傳&l
簡單的jquery ajax檔案上傳功能
/* * 圖片上傳 * 注意如果不加processData:false和contentType:false會報錯 */ function uploadImage(
jquery ajax 檔案上傳(input type=file)
localStorage.setItem("token",'e7e6238fde352eeb0aba417df305c497');//儲存名稱為“key”的值 var token = localStorage.getItem("token");//獲取名稱為“key”的值 funct
【Jsp】使用AjaxFileUploader與jspsmartupload完成不重新整理的Ajax檔案上傳系統
這個不重新整理的Ajax檔案上傳系統同樣可以用來做預覽圖 雖然預覽圖完全可以通過不上傳圖片就完成,但是不重新整理的Ajax檔案上傳系統可以做到上傳完圖片立即返回上傳結果給使用者的結果 上次在《【Jsp】使用jspsmartupload完成簡單的檔案上傳系統》(點選開啟連結)
PHP強化之13 - 檔案上傳與下載
一、檔案上傳 將客戶端檔案上傳到伺服器端,再將伺服器端的檔案(臨時檔案)移動到指定目錄即可。 1、form表單 檔案的上傳一般都是經過form表單來實現的。 1)標籤enctype屬性 表單中enctype="multipart/form-data"是用於設定表單的MIM
(轉)python 全棧開發,Day75(Django與Ajax,檔案上傳,ajax傳送json資料,基於Ajax的檔案上傳,SweetAlert外掛)
昨日內容回顧 基於物件的跨表查詢 正向查詢:關聯屬性在A表中,所以A物件找關聯B表資料,正向查詢 反向查詢:關聯屬性在A表中,所以B物件找A物件,反向查詢 一對多: 按欄位:xx book --
jQuery使用ajaxfileupload外掛實現ajax檔案上傳
<!-- 引入相關的js檔案,相對路徑 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"
Ajax 檔案上傳之PHP心得
最近發現網上轉載不註明出處的文章很多,為了創造一個良好的開源環境.請您轉載後註明出處.謝謝合作!這樣會鼓勵我們的開源慾望. jquery 這個JS元件不知道大家用過沒有?在有一定的Ajax基礎之後,利用它來開發Ajax是一件非常有趣的事情,一直以來就被Js的傳統
php+ajax檔案上傳進度條
demo.php - 上傳過程處理 PLAIN TEXTPHP: <?php include 'UploadProgressMeter.class.php'; fileWidget = new UploadProgressMeter(); if (fileWidget
springMvc Ajax 檔案上傳
/** * 儲存 * @param json * @return */ @RequestMa
php/PHP 阿里雲OSS檔案上傳
一、封裝的upload方法能看懂就看 看不懂直接使用 1.支援base64和普通表單等檔案上傳方式(會自動判斷方式) 2.呼叫時候只需要傳入一個要上傳到阿
HTTP POST請求報文格式分析與Java實現檔案上傳
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
AmazeUI+Ajax檔案上傳,後臺.netMVC
前端: <!--<link href="~/assets/css/amazeui.min.css" rel="stylesheet" />--> <!--<script src="~/assets/js/jquery.min.js"></s
tp3.2+layui ajax檔案上傳(直接上程式碼)
三步走 第一步:html程式碼 <div class="col-lg-6 uploadID"> 圖片xxx <div> <input type="file" name="sfz_img" id="ulFont" required&
php進階——01 檔案上傳
php.ini相關引數 file_uploads 是否允許PHP上傳檔案,預設為ON。 upload_tmp_dir 上傳檔案在處理之前,必須先上傳到伺服器上的某個臨時資料夾; 此引數就是決定臨時目錄的路徑,此目錄需要有讀寫許可權。 一般
ajax檔案上傳方法
<meta http-equiv="Content-Type" content="multipart/form-data;charset=UTF-8" /> $("#submit").on('click', function(){ //可以上傳除了
Django基礎(17): 如何上傳處理檔案,檔案格式驗證及Ajax檔案上傳示範(附GitHub原始碼)
小編我今天要寫篇值得大家收藏的文章。我將重點解釋Django上傳處理檔案中需要考慮的重要事項,並提供一般檔案上傳及Ajax檔案上傳的示範(附GitHub原始碼)。如果你的專案需要用到檔案上傳,你可以從GitHub獲取原始碼,簡化你的開發。 Django檔案上傳需要考
ajax提交form表單,包括ajax檔案上傳
使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageCont
寶塔-PHP-伺服器-資料庫-FTP-檔案上傳 問題集
簡介: 今天分享一下自己寫的筆記,最近部署伺服器所遇到的各種問題,比較典型的問題都寫在了筆記裡面,現在我把筆記分享給出來,希望可以給大家一點幫助~ 問題目錄: 1.寶塔設定 伺服器 本地資料庫、RDS雲資料庫 連線不上 2.寶塔設定 伺服器 FTP無法連線
PHP TP3.2 音樂檔案上傳並在本地播放
HTML <div class="form-group" id="pic_list"><label class="col-sm-2 control-label no-padding-