ajax圖片上傳
❶ ajax可以實現圖片上傳嗎
可以實現。
1：先說我們平時接觸到的介面都是後台需要你給他傳遞幾個參數，你就把參數對應的值 給他們就行了
eg：
❷ ajax自動上傳圖片
上傳的話，你做一個隱藏控制項。用onchange事件進行監聽。然後form表單提交到一個iframe中處理就可以了。根本不用ajax。上傳完了以後再iframe中向上層寫一個值，表示上傳完成，或者直接寫上傳地址。然後再提交就可以了。
❸ 怎麼用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 上傳圖片怎麼獲取
我們以創建產品時，上傳產品主圖為例，先來演示一下效果，首先是在用戶界面上出現一個input file元素，用戶點擊時，可以選擇一個圖片
點擊打開之後，後台開始非同步上傳圖片數據到伺服器，同時載入動態圖片顯示
3
圖片數據傳輸完畢，後台返回上傳好的圖片的路徑，然後顯示出剛剛上傳好的圖片，同時載入按鈕消失
❺ 如何用ajax上傳文件
引入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.獲取之後怎麼處理自己看著辦咯，我只能幫到這里了
❻ 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>
❼ jquery ajax上傳圖片問題
現在基本上沒有真正的AJAX圖片上傳，你想多了
都是偽AJAX上傳
但是如果是HTML5，倒是有可能，使html5的 canvas，可以把圖片序例化成base64字元串，把這個字元串傳到伺服器，處理一下，再保存就OK了，
我想知道你直接ajax怎麼傳，把你本地路徑傳過去嗎~~~~~
肯定是不行的
❽ Java中如何實現Ajax方式上傳圖片
你好，據我所知，Ajax不能上傳圖片，因為上傳圖片得把圖片的二進制數據傳送給WEB伺服器。而Ajax不能完成。
如果樓主指點是無刷新上傳圖片。即不更改當前頁面上傳圖片，利用STRUTS並在HTML頁面中加一個iframe標簽，CSS DISPLAY屬性為NONE 而上傳圖片的表單的TARGET屬性等於這個iframe的名字。
❾ ajax怎麼上傳圖片
這個一般要使用插件,手動不好搞,你去網路webuploader吧,網路出的上傳插件api全面,也比較好用