拖動檔案到瀏覽器進行ajax上傳
1.html中div標籤預覽顯示,button標籤觸發上傳事件
<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">將圖片拖拽到此</div>
<button onclick="xhr2()">ajax上傳</button>
2、禁止瀏覽器開啟檔案行為
document.addEventListener("drop",function(e){ //拖離 e.preventDefault(); }) document.addEventListener("dragleave",function(e){ //拖後放 e.preventDefault(); }) document.addEventListener("dragenter",function(e){ //拖進 e.preventDefault(); }) document.addEventListener("dragover",function(e){ //拖來拖去 e.preventDefault(); })
3、拖拽,預覽檔案
var box = document.getElementById('drop_area'); //拖拽區域 box.addEventListener("drop",function(e){ var fileList = e.dataTransfer.files; //獲取檔案物件 //檢測是否是拖拽檔案到頁面的操作 if(fileList.length == 0){ return false; } //拖拉圖片到瀏覽器,可以實現預覽功能 //規定視訊格式 Array.prototype.S=String.fromCharCode(2); Array.prototype.in_array=function(e){ var r=new RegExp(this.S+e+this.S); return (r.test(this.S+this.join(this.S)+this.S)); }; var video_type=["video/mp4","video/ogg"]; //建立一個url連線,供src屬性引用 var fileurl = window.URL.createObjectURL(fileList[0]); if(fileList[0].type.indexOf('image') === 0){ //如果是圖片 var str="<img width='200px' height='200px' src='"+fileurl+"'>"; document.getElementById('drop_area').innerHTML=str; }else if(video_type.in_array(fileList[0].type)){ //如果是規定格式內的視訊 var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>"; document.getElementById('drop_area').innerHTML=str; }else{ //其他格式,輸出檔名 //alert("不預覽"); var str="檔名字:"+fileList[0].name; document.getElementById('drop_area').innerHTML=str; } resultfile = fileList[0]; },false);
4、ajax上傳
function xhr2(){ var xhr = new XMLHttpRequest();//第一步 //新建一個FormData物件 var formData = new FormData(); //++++++++++ //追加檔案資料 formData.append('file', resultfile); //post方式 xhr.open('POST', 'xhr2.php'); //第二步驟 //傳送請求 xhr.send(formData); //第三步驟 //ajax返回 xhr.onreadystatechange = function(){ //第四步 if ( xhr.readyState == 4 && xhr.status == 200 ) { console.log( xhr.responseText ); } }; //設定超時時間 xhr.timeout = 10000; xhr.ontimeout = function(event){ alert('請求超時!'); } }
5、php儲存檔案
<?php
print_r($_FILES["file"]);
$name = $_FILES["file"]["name"]; //中文可能亂碼使用iconv函式
move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
?>
相關推薦
拖動檔案到瀏覽器進行ajax上傳
1.html中div標籤預覽顯示,button標籤觸發上傳事件<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">將圖片拖拽到此</div>
django 基於form表單上傳檔案和基於ajax上傳檔案
一、基於form表單上傳檔案 1、html裡是有一個input type="file" 和 ‘submit’的標籤 2、vies.py def fileupload(request): if request.method == 'POST': print(request.P
windows中拖動檔案到瀏覽器,實現自動上傳 -- Java
//拖動License檔案到瀏覽器中,自動讀取檔案並上傳var dropbox = $("body")[0];dropbox.addEventListener("dragenter", function(e){ e.stopPropagation(); e.preventDefault();},
關於ajax進行form表單提交進行非同步上傳裡面帶有檔案上傳的問題
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &
工作總結之----IE使用ajax上傳檔案報錯,其他瀏覽器正常問題解決過程
錯誤資訊: 嚴重: Servlet.service() for servlet [springMVC] in context with path [] threw exception [Request processing failed; nested exceptio
支援多檔案上傳,預覽,拖拽,基於bootstrap的上傳外掛fileinput的ajax非同步上傳
首先需要匯入一些js和css檔案 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__
Ajax 上傳檔案(input file FormData)
FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料,但亦可用於傳送帶鍵資料(keyed data),而獨立於表單使用。 jQuery Ajax 上傳檔案 通過 Ajax 向後臺傳送檔案(包括圖片)時,其引數型別屬於物件。可以建立一個 FormD
Ajax上傳檔案及攜帶引數
HTML程式碼 <div class="form-group"> <label class="col-sm-2 control-label">檔案上傳</label> <div class="col-sm-10"
SpringMVC Ajax上傳檔案例項
做了一個檔案上傳模組,因為傳統的form提交會有頁面重新整理,不符合我的使用要求,所以我採用Ajax提交方式,這裡說明下,我的應用程式前端為Ajax提交,後端SpringMVC接收處理。 傳統form提交檔案方式: <form id="uploadPic" action="/user/
Django 使用ajax上傳檔案
Django 使用ajax上傳檔案 JSON json指的是JavaScript物件表示法(JavaScript Object Notaion) json是輕量級的文字資料交換格式 json獨立於語言 json具有自我描述性,更易理解 JSON 使用 JavaScript 語法來描述資料物件,但是
ajax上傳檔案 基於jquery form表單上傳檔案
<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到使用者填寫的資料 var for
Springmvc中ajax上傳檔案出現400錯誤
Springmvc中ajax上傳檔案出現400錯誤 一、配置spring-mvc.xml 需要在spring-mvc.xml中配置檔案上傳解析器 <!-- 定義檔案上傳解析器 --> <bean id="multipartResolver" cl
ajax 上傳檔案,post上傳檔案,ajax 提交 JSON 格式的資料
ajax簡介 前後臺做資料互動 前後端做資料互動的方式(三種): (1)瀏覽器視窗輸入地址(get的方式)(2)form表單提交資料(3)ajax提交資料 特點 特點: (1)非同步 非同步與同步的區別:同步是請求發過去,要等著迴應;非同步不
ajax上傳檔案,php接收
//html <input id="user_real_name" class="input_show" type="text" value="" placeholder="姓名"> <input id="file1" class="ufile" type="file" name
Ajax上傳檔案之上傳圖片
這用到iframe+form形式上傳圖片 簡單的 不利用formData物件 onchange='' 也是用來觸發事件,當狀態一改變就執行寫入的函式 為了確保圖片路徑要唯一:uuid+obj.name onload='' 做回撥函式,對後端傳來的資料處理 前端
ajax 上傳檔案和form
1、檔案html,點選顯示 <div class="col-md-2"> <a href="javascript:void(0);" class="thumbnail">
HTML5拖拽上傳檔案,chrome資料夾上傳
最近被安排做一個拖拽上傳和資料夾上傳的功能,不考慮相容性,哈哈這個可以用HTML5實現。這裡就不仔細學習HTML5,我只是想找例子,然後偷過來用,至於原理邊用邊學。 仔細看完估計原理你也會懂的。 可是並不是那麼一帆風順,故事發生了: 資料夾上傳的時候,如果資料夾內還有資料夾上面的那個例子
利用js/jq 利用FormData 物件和ajax上傳檔案
new FormData(); 可以獲取某個表單,但是有時候感覺不太靈活。可以利用jq獲取指定input type=file 中的檔案,將其賦值給FormData 例項的某個屬性,做上傳。 HTML: <div class="test" style="
WEB版一次選擇多個檔案進行批量上傳(swfupload)的解決方案
功能完全支援ie和firefox瀏覽器! 一般的WEB方式檔案上傳只能使用FileUpload控制元件進行一個檔案一個檔案的進行上傳,就算是批量上傳,也要把檔案一個一個的新增到頁面,無法如windows程式一樣,一次選擇多個檔案進行批量上傳。這樣在某些應用上就
java實現FTP上傳下載:FTPClient類進行FTP上傳下載大檔案(包含導致假死現象)
介紹: FTPClient是一個強大的FTP上傳下載工具,可以實現各種方式的ftp檔案傳輸,可以支援上傳下載各種大檔案(已在實踐中使用),而且存在官網使使用者方便的使用這個工具等等。 1.首先,程式中設定ftp請求方式為被動模式,即程式去請求ftp伺服器,要求伺服器來