djangoajax上傳文件

Ⅰ 怎樣利用ajax實現多個文件上傳

<script type="text/javascript">
$(document).ready(function () {

$("#uploadify").uploadify({
'uploader': 'image/uploadify.swf', //uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框
'script': 'Handler1.ashx',// script ： 後台處理程序的相對路徑
'cancelImg': 'image/cancel.png',
'buttenText': '請選擇文件',//瀏覽按鈕的文本，默認值：BROWSE。
'sizeLimit':999999999,//文件大小顯示
'floder': 'Uploader',//上傳文件存放的目錄
'queueID': 'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致
'queueSizeLimit': 120,//上傳文件個數限制
'progressData': 'speed',//上傳速度顯示
'auto': false,//是否自動上傳
'multi': true,//是否多文件上傳
//'onSelect': function (e, queueId, fileObj) {
// alert("唯一標識:" + queueId + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +

Ⅱ 怎麼用ajax實現上傳文件的功能

HTTP File Server

http-file-server是用 python 實現的 HTTP 文件伺服器，支持上傳和下載文件。

運行

$ python file-server.py files 8001

其中第一個參數files是存放文件的路徑，第二個參數8001是 HTTP 伺服器埠。

介面

1. 讀取文件

GET /pathtofile/filename

2. 讀取文件夾下所有文件（已經忽略隱藏文件）

GET /path

返迴文件列表為JSON數組，文件名末尾帶有/的表示是文件夾。filename為文件名，mtime為修改時間。

[{"filename":"f1.txt","mtime":1001},{"filename":"p3/","mtime":1002}]

3. 上傳文件

採用POST方式上傳文件，URL參數中傳參數name表示上傳的文件名，POST內容為文件內容。

POST /upload?name=filename

ajax示例:

// file is a FileReader object
var data = file.readAsArrayBuffer();
var xhr = new XMLHttpRequest();
var url = "http://localhost:8001/upload?name=xxx.md";
xhr.open("post", url, true);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);
}
}
xhr.send(data);

文件名 filename 可以包含相對路徑。比如：upload?name=md/xxx.md。則上傳至md目錄下。

Ⅲ 如何將Ajax上傳圖片至伺服器（伺服器就是本地文件夾），並將圖片地址存入MySQL資料庫方便以後調用

1. 後台程序編寫上傳、錄入資料庫的邏輯代碼；
2. 通過ajax訪問邏輯代碼地址上傳

Ⅳ ajax上傳文件提交時，enctype=multipart/form-data怎麼帶過去

form中的欄位，加上get set方法

private FormFile file;

private String filename;

private String filesize;

action 部分:

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String dir="D:/";

UpFileForm uff=(UpFileForm)form;

FormFile file=uff.getFile();

if(file.getFileSize()==0){

return mapping.findForward("success");

}

String fname=file.getFileName();

String size=Integer.toString(file.getFileSize())+"bytes";

InputStream streamIn=file.getInputStream();

OutputStream streamOut=new FileOutputStream(dir+"/"+fname);

int bytesRead=0;

byte[] buffer=new byte[8192];

while((bytesRead=streamIn.read(buffer,0,8192))!=-1){

streamOut.write(buffer,0,bytesRead);

}

streamOut.close();

streamIn.close();

uff.setFilename(fname);

uff.setFilesize(size);

file.destroy();

return mapping.findForward("success");

}

這樣將上傳的文件存在d盤。

Ⅳ 怎麼用ajax提交file文件上傳

上傳的文件是沒有辦法和表單內容一起非同步的，可考慮使用jquery的ajaxfileupload，或是其他的插件，非同步上傳文件後，然後再對表單進行操作。

Ⅵ python django通過ajax向後端傳json怎麼解析

這么有逼格的問題竟然沒分!

$.ajax({
url:"xxx",
dataType:'json',
data:formData,
type:"POST",
cache:false,
processData:false,
contentType:false
})
.done(function(data){
varcode=data.err_code;
if(code.length!==0){
switch(code){
case'10001':
layer.msg(loginTimeoutText);
self.locatToLogin();
break;
case'液皮10003':
猛笑layer.msg(systemBusyText);
break;
case'0':
location.href="/xxx/?id="+id+"&vote_id="+data.id;
break;
case'9999':
layer.msg(notLoginedInText);
//self.locatToLogin();
break;
default:
break;
枝埋含}
}
})
.fail(function(){
layer.msg(failText);
});

Ⅶ ajax如何 實現 文件上傳

程序說明

使用說明

實例化時，第一個必要參數是file控制項對象：

newQuickUpload(file);

第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行

還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。

varQuickUpload=function(file,options){

this.file=$$(file);

this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數

$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);

this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);

this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}

Ⅷ ajax的res怎麼傳到其他文件

傳其他參豎坦數
ajax文件上傳怎麼傳帶纖臘其他參數,Ajax進行文件與其他參數的上傳功能

光啟元
轉載
關注
0點贊·945人閱讀
記得前一段時間，為了研究Ajax文件上傳，找了很多資料，在網上看到的大部分是form表單的方式提交文件，對於Ajax方式提交文件並且也要提交表單中其他數據，發現提及的並不是很多，後來在同事的幫助下，使用ajaxfileupload最終完成了文件上傳與其他提交的操作，現在分享給大家，希望大家能有有所幫助。本文主要介紹了使用Ajax進行文件與其他參數的上傳功能(java開發),非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能幫助到大家。

文件上傳：

操作步驟：

1 導入jar包：

我們在使用文件上傳時，需要使用到兩個jar包，分別是commons-io與commons-fileupload，在這里我使用的兩個版本分別是2.4與1.3.1版本的，需要使用JS文件與jar包最後會發給大家一個連接(如何失效請直接我給留言，我會及時更改，謝謝)。

2 修改配置文件：

當我們導入的jar包是不夠的，我們需要使用到這些jar包，由於我當時使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具體配置方法如下：

104857600

4096

3 JSP文件：

大家對form表單提交問價的方式很熟悉，但是我們有很多情況下並不能直接使用form表單方式直接提交。這時候我們就需要使用Ajax方式提交，Ajax有很多的好處，比如當我們不需要刷新頁面獲希望進行局部蠢滑刷新的時候，我們就可以使用Ajax。

Ⅸ Django上傳原理求解

隨著網站運作，難免有些時候需要上傳文件。上傳文件自然是上傳到網站所在的伺服器，日積月累，慢慢地網站存儲空間越來越少。而且網站遷移和備份都不方便，使用這些資源時也佔用大量伺服器流量。

較好的解決方案是使用第三方存儲伺服器，例如七牛、阿里雲OSS、亞馬遜S3等。將文件都放到這些存儲伺服器，可以減少伺服器負擔。伺服器只剩下必要的靜態文件和代碼。

以阿里雲OSS為例，講解如何使用第三方存儲伺服器。（剛好最近用到這個，而且Django有其他人寫好的第三方庫）

首先，需要擁有OSS。這個去阿里雲購買即可。購買之後可得到密鑰等一系列信息。

接著，安裝oss2庫，該庫是Python對應oss的操作庫。

這樣設置，點擊文件鏈接，即可下載並且下載文件名是上傳的文件名。若你不是什麼類型文件都需要這么處理，可以判斷filename的後綴名加以處理。

Ⅹ django文件上傳的時候怎麼能加一個上傳進度的顯示

首先需要一個表單來讓用戶選擇要上傳的文件。

1 <form id="form_upload" action="/upload" method="POST">
2 <input type="file" name="picture" id="picture" />
3 <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
4 <input type="hidden" id="id" name="id" value=""/>
5 <input id="form_submit_button" class="tp-button" type="submit" value="Submit" />
6 </form>
這里增加了兩個隱藏的輸入框，第一個是 『X-Progress-ID』，代表上傳 ID，這樣我們才能夠在伺服器端支持並發的上傳請求。稍後我們會看到，伺服器是如何處理這個值的。

然後還有一個隱藏輸入框 『id』，在我們的例子里代表菜品的編號。

我們將使用 Ajax 來發送 POST 請求，這樣表單便可以很好地集成在現代的網路界面中，同時包含一個進度條。我們打算使用 jQuery Form plugin 來實現這一點。

函數 ajaxSubmit() 將會幫我們搞定一切。

為上傳 ID 生成一個隨機字串，並用它設置輸入框的值。
需要指定一個用於上傳請求的 URL 和兩個回調函數：一個在請求前調用，另一個在請求完成後調用。

1 $('#X-Progress-ID').val('random string');
2 var options = {
3 dataType: 'xml',
4 url: '/upload?X-Progress-ID='+$('#X-Progress-ID').val(),
5 beforeSubmit: showRequest,
6 success: showResponse
7 }
8 $('#form_upload').ajaxSubmit(options);
showRequest 回調函數只需要像下面這么簡單就行了：

1 function showRequest(formData, jqForm, options) {
2 // do something with formData
3 return True;
4 }
在 showResponse 函數中，我們需要處理響應，並對它進行操作。在我的例子里，我處理了伺服器返回的帶有狀態值的 xml。

1 function showResponse(response) {
2 // do something with response
3 }
用戶按下提交的時候，我們希望顯示一個進度條，因此可以使用下面的 JS 代碼，向表單添加進度條。progressBar() 方法是 jQuery progress bar plugin 的一部分。

1 $('#form_upload').find('#form_submit_input').append('<span id="uploadprogressbar"></span<');
2 $('#form_upload').find('#uploadprogressbar').progressBar();
現在我們需要添加一個每隔幾秒運行一次的函數，來從伺服器獲取上傳進度，並相應地更新進度條。

為此，我們使用 setInterval() 向伺服器發出一個 GET 請求，獲取 JSON 格式的進度值。我們向伺服器傳送上傳 ID。當返回 null 值的時候，就可以知道上傳已經結束。

01 function startProgressBarUpdate(upload_id) {
02 $("#uploadprogressbar").fadeIn();
03 if(g_progress_intv != 0)
04 clearInterval(g_progress_intv);
05 g_progress_intv = setInterval(function() {
06 $.getJSON("/get_upload_progress?X-Progress-ID="
07 + upload_id, function(data) {
08 if (data == null) {
09 $("#uploadprogressbar").progressBar(100);
10 clearInterval(g_progress_intv);
11 g_progress_intv = 0;
12 return;
13 }
14 var percentage = Math.floor(100 * parseInt(data.uploaded) / parseInt(data.length));
15 $("#uploadprogressbar").progressBar(percentage);
16 });