當前位置:首頁 » 文件傳輸 » ajax上傳
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

ajax上傳

發布時間: 2022-02-23 08:03:57

A. 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盤。

B. ajax+html實現文件上傳有哪幾種方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>大文件切割上傳</title>
<link rel="stylesheet" href="">
<script>
function selfile(){
const LENGTH = 1024 * 1024 * 10;//每次上傳的大小
var file = document.getElementsByName('video')[0].files[0];//文件對象
var filename=document.getElementsByName('video')[0].files[0].name;
var totalSize = file.size;//文件總大小
var start = 0;//每次上傳的開始位元組
var end = start + LENGTH;//每次上傳的結尾位元組
var fd = null//創建表單數據對象
var blob = null;//二進制對象
var xhr = null;//xhr對象
while(start < totalSize){
fd = new FormData();//每一次需要重新創建
xhr = new XMLHttpRequest();//需要每次創建並設置參數
xhr.open('POST','upload.php',false);
blob = file.slice(start,end);//根據長度截取每次需要上傳的數據
fd.append('video',blob);//添加數據到fd對象中
fd.append('filename',filename); //獲取文件的名稱
xhr.send(fd);//將fd數據上傳

//重新設置開始和結尾
start = end;
end = start + LENGTH;

}

}
</script>
</head>
<body>
<h1>大文件切割上傳</h1>
<input type="file" name="video" onchange="selfile();" />
</body>
</html>

C. 怎麼樣通過jQuery Ajax實現上傳文件

Query Ajax在web應用開發中很常用,它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法,接下來通過本文給大家介紹jquery ajax 上傳文件處理方式。
FormData對象
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個」表單」.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest寫的請求
XMLHttpRequest方式
xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其實jquery的ajax也可以支持到的,關鍵是設置:processData 和 contentType 。
ajax方式

var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告訴jQuery不要去處理發送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
beforeSend:function(){
console.log("正在進行,請稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失敗");
}
},
error : function(responseStr) {
console.log("error");
}
});

D. 用ajax上傳最大就是20M,有什麼辦法可以控制上傳文件的大小,傳多大的文件都可以

這個要看你的ajax插件代碼了,應該有個類似:maxFileSize的屬性控制,找到這個屬性值,改大點,或者把這個判斷取消掉

E. 怎麼用ajax提交file文件上傳

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

F. JS怎樣用AJAX上傳文件

可以使用jquery的uploadfild插件,或者jquery upload插件進行附件上傳,兩種插件的實現原理差不多,可以進行參考。

G. java+AJAX上傳文件

http://download.csdn.net/source/214291

http://www.winu.cn/htmls/170/111/

H. 如何用ajax上傳文件

  1. 引入ajaxfileupload.js

jQuery.extend({


createUploadIframe:function(id,uri)
{
//createframe
varframeId='jUploadFrame'+id;

if(window.ActiveXObject){
vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
if(typeofuri=='boolean'){
io.src='javascript:false';
}
elseif(typeofuri=='string'){
io.src=uri;
}
}
else{
vario=document.createElement('iframe');
io.id=frameId;
io.name=frameId;
}
io.style.position='absolute';
io.style.top='-1000px';
io.style.left='-1000px';

document.body.appendChild(io);

returnio
},
createUploadForm:function(id,fileElementId)
{
//createform
varformId='jUploadForm'+id;
varfileId='jUploadFile'+id;
varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
varoldElement=$('#'+fileElementId);
varnewElement=$(oldElement).clone();
$(oldElement).attr('id',fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
//setattributes
$(form).css('position','absolute');
$(form).css('top','-1200px');
$(form).css('left','-1200px');
$(form).appendTo('body');
returnform;
},
addOtherRequestsToForm:function(form,data)
{
//addextraparameter
varoriginalElement=$('<inputtype="hidden"name=""value="">');
for(varkeyindata){
name=key;
value=data[key];
varcloneElement=originalElement.clone();
cloneElement.attr({'name':name,'value':value});
$(cloneElement).appendTo(form);
}
returnform;
},

ajaxFileUpload:function(s){
//TODOintroceglobalsettings,,notonlytimeout
s=jQuery.extend({},jQuery.ajaxSettings,s);
varid=newDate().getTime()
varform=jQuery.createUploadForm(id,s.fileElementId);
if(s.data)form=jQuery.addOtherRequestsToForm(form,s.data);
vario=jQuery.createUploadIframe(id,s.secureuri);
varframeId='jUploadFrame'+id;
varformId='jUploadForm'+id;
//Watchforanewsetofrequests
if(s.global&&!jQuery.active++)
{
jQuery.event.trigger("ajaxStart");
}
varrequestDone=false;
//Createtherequestobject
varxml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//Waitforaresponsetocomeback
varuploadCallback=function(isTimeout)
{
vario=document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

}elseif(io.contentDocument)
{
xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
if(xml||isTimeout=="timeout")
{
requestDone=true;
varstatus;
try{
status=isTimeout!="timeout"?"success":"error";
//
if(status!="error")
{
//processthedata()
vardata=jQuery.uploadHttpData(xml,s.dataType);
//Ifalocalcallbackwasspecified,fireitandpassitthedata
if(s.success)
s.success(data,status);

//Firetheglobalcallback
if(s.global)
jQuery.event.trigger("ajaxSuccess",[xml,s]);
}else
jQuery.handleError(s,xml,status);
}catch(e)
{
status="error";
jQuery.handleError(s,xml,status,e);
}

//Therequestwascompleted
if(s.global)
jQuery.event.trigger("ajaxComplete",[xml,s]);

//HandletheglobalAJAXcounter
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");

//Processresult
if(s.complete)
s.complete(xml,status);

jQuery(io).unbind()

setTimeout(function()
{ try
{
$(io).remove();
$(form).remove();

}catch(e)
{
jQuery.handleError(s,xml,null,e);
}

},100)

xml=null

}
}
//Timeoutchecker
if(s.timeout>0)
{
setTimeout(function(){
//
if(!requestDone)uploadCallback("timeout");
},s.timeout);
}
try
{
//vario=$('#'+frameId);
varform=$('#'+formId);
$(form).attr('action',s.url);
$(form).attr('method','POST');
$(form).attr('target',frameId);
if(form.encoding)
{
form.encoding='multipart/form-data';
}
else
{
form.enctype='multipart/form-data';
}
$(form).submit();

}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload',uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load',uploadCallback,false);
}
return{abort:function(){}};

},

uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
//Ifthetypeis"script",evalitinglobalcontext
if(type=="script")
jQuery.globalEval(data);
//GettheJavaScriptobject,ifJSONisused.
if(type=="json")
{
//,
//youhavetodeletethe'<pre></pre>'tag.
//ThepretaginChromehasattribute,sohavetouseregextoremove
vardata=r.responseText;
varrx=newRegExp("<pre.*?>(.*?)</pre>","i");
varam=rx.exec(data);
//thisisthedesireddataextracted
vardata=(am)?am[1]:"";//theonlysubmatchorempty
eval("data="+data);
}
//evaluatescriptswithinhtml
if(type=="html")
jQuery("<div>").html(data).evalScripts();
//alert($('param',data).each(function(){alert($(this).attr('value'));}));
returndata;
}
})

2.引入上傳文件所需的jar

7.獲取之後怎麼處理自己看著辦咯,我只能幫到這里了

I. ajax可以實現圖片上傳嗎

可以實現。

1:先說我們平時接觸到的介面都是後台需要你給他傳遞幾個參數,你就把參數對應的值 給他們就行了

eg:


J. 如何用Ajax實現多文件上傳

jquery 實現多個上傳文件教程:
首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):
1
2
3
4
5
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、頁面的基本代碼如下
這里用的是aspx頁面(html也是也可的)
頁面中引入的js和js函數如下:
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

</script>
js函數:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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" +
// "文件大小:" + fileObj.size + "\r\n" +
// "創建時間:" + fileObj.creationDate + "\r\n" +
// "最後修改時間:" + fileObj.modificationDate + "\r\n" +
// "文件類型:" + fileObj.type);

// }
'onQueueComplete': function (queueData) {
alert("文件上傳成功!");
return;
}

});
});
頁面中的控制項代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上傳" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函數主要參數:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
$('#fileInput1').fileUpload({
'uploader': 'uploader.swf',//不多講了
'script': '/AjaxByJQuery/file.do',//處理Action
'cancelImg': 'cancel.png',
'folder': '',//服務端默認保存路徑
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下
//'buttonImg':'圖片路徑',//通過設置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子
'multi':'true',//多文件上傳開關
'fileExt':'*.xls;*.csv',//文件過濾器
'fileDesc':'.xls',//文件過濾器 詳解見文檔
'onComplete' : function(event,queueID,file,serverData,data){
//serverData為伺服器端返回的字元串值
alert(serverData);
}
});
});
後台一般處理文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

HttpPostedFile file = context.Request.Files["Filedata"];//對客戶端文件的訪問

string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//伺服器端文件保存路徑

if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//創建服務端文件夾
}

file.SaveAs(uploadPath + file.FileName);//保存文件
context.Response.Write("上傳成功");
}

else
{
context.Response.Write("0");
}

}

public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以實現多文件的上傳,大文件大小是在控制在10M以下/。