ajax上傳圖片到伺服器
1. ajax 上傳圖片怎麼獲取
我們以創建產品時，上傳產品主圖為例，先來演示一下效果，首先是在用戶界面上出現一個input file元素，用戶點擊時，可以選擇一個圖片
點擊打開之後，後台開始非同步上傳圖片數據到伺服器，同時載入動態圖片顯示
3
圖片數據傳輸完畢，後台返回上傳好的圖片的路徑，然後顯示出剛剛上傳好的圖片，同時載入按鈕消失
2. ajax如何 實現 文件上傳
java">
程序說明
使用說明
實例化時，第一個必要參數是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);}
}
}
3. jquery如何將頁面生成的圖片上傳到伺服器
File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>
4. jsp中使用jquery的ajaxfileupload插件怎麼實現非同步上傳
ajaxfileupload實現非同步上傳的完整例子：
JSP頁面中引入的script代碼：
<script>
function ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//開始上傳文件時顯示一個圖片
.ajaxComplete(function(){
$(this).hide();
});//文件上傳完成將圖片隱藏起來
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用於文件上傳的伺服器端請求地址
secureuri:false,//一般設置為false
fileElementId:'imgfile',//文件上傳空間的id屬性 <input type="file" id="imgfile" name="file" />
dataType: 'json',//返回值類型 一般設置為json
success: function (data, status) //伺服器成功響應處理函數
{
alert(data.message);//從伺服器返回的json中取出message中的數據,其中message為在struts2中定義的成員變數
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//伺服器響應失敗處理函數
{
alert(e);
}
}
)
return false;
}
</script>
struts.xml配置文件中的配置方法：
<struts>
<package name="struts2" extends="json-default">
<action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction">
<result type="json" name="success">
<param name="contentType">text/html</param>
</result>
<result type="json" name="error">
<param name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上傳處理的Action ImageUploadAction.action
package com.test.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.Arrays;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class ImageUploadAction extends ActionSupport {
private File imgfile;
private String imgfileFileName;
private String imgfileFileContentType;
private String message = "你已成功上傳文件";
public File getImgfile() {
return imgfile;
}
public void setImgfile(File imgfile) {
this.imgfile = imgfile;
}
public String getImgfileFileName() {
return imgfileFileName;
}
public void setImgfileFileName(String imgfileFileName) {
this.imgfileFileName = imgfileFileName;
}
public String getImgfileFileContentType() {
return imgfileFileContentType;
}
public void setImgfileFileContentType(String imgfileFileContentType) {
this.imgfileFileContentType = imgfileFileContentType;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@SuppressWarnings("deprecation")
public String execute() throws Exception {
String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };
try {
File f = this.getImgfile();
String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上傳的文件格式不允許!!!";
return ERROR;
}*/
/**
* 檢測上傳文件的擴展名是否合法
* */
if (!Arrays.<String> asList(imgTypes).contains(fileExt)) {
message="只能上傳 gif,jpg,jpeg,png,bmp等格式的文件!";
return ERROR;
}
FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "文件上傳失敗了!!!!";
}
return SUCCESS;
}
}
5. ajaxFileUpload 怎麼傳相關參數到後台
先簡介一下ajaxFileUpload參數：
options參數說明：
1、url 上傳處理程序地址。
2，fileElementId 需要上傳的文件域的ID，即<input type="file">的ID。
3，secureuri 是否啟用安全提交，默認為false。
4，dataType 伺服器返回的數據類型。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。
5，success提交成功後自動執行的處理函數，參數data就是伺服器返回的數據。
6，error 提交失敗自動執行的處理函數。
7，data 自定義參數。這個東西比較有用，當有數據是與上傳的圖片相關的時候，這個東西就要用到了。
8, type 當要提交自定義參數時，這個參數要設置成pos
$.ajaxFileUpload({ url : 'upload',
secureuri : false, fileElementId : 'fileToUpload',
dataType : 'json', data : {id:id},//這種寫法我在後台不管怎麼取，值都為null 就去網路了一下，最後還是沒有解決
success : function(data, status) { $('#viewImg').attr('src',data.picUrl);
}, error : function(data, status, e) {
alert('上傳出錯'); }
})
這樣就與options參數說明中data參數不符合了，最終還是沒有找到原因是那點沒有寫正確。
6. ajaxFileUpload非同步上傳圖片，伺服器文件叫多，如何刪除啊~~
可以做個批量清理的小程序，把所有上傳的圖片，都存在資料庫里，然後遍歷上傳的這個目錄，讀取到文件名以後，去資料庫查，要是不存在的話，說明這張圖是沒有用的，刪除~
7. CI框架怎麼使用ajax方式無刷新上傳文件/圖片
上傳方式還是一樣。點擊上傳，其實這張圖已經上傳到伺服器當中去了，並且存放到你的相應的上傳目錄裡面了，你只要把上傳之後的圖片的路徑返回到前台就行了！
就可以做到無刷新上傳了！
圖片正常顯示。
8. 用jquery實現ajax 上傳圖片提交到PHP
好像不可以吧，瀏覽器為了安全不能用javascript讀取本地文件的
9. commonfileupload怎麼與ajax一起使用
1、首先commonfileupload點擊"上傳"按鈕，選擇一張圖片，點擊"提交"按鈕，提交到後台。
2、其次保存到伺服器目錄下，將文件路徑保存至資料庫，成功後返回該路徑到前台。
3、最後即可與ajax一起使用。
10. 使用apicloud的getPicture模塊 選擇圖片怎麼上傳伺服器
實現思路：
1、api.getPicture獲取到本地圖片的路徑
2、api.ajax使用post方式上傳這張圖片，
3、你的伺服器接收完圖片後返回這張圖片在你伺服器上的地址。
以上涉及到的api請到文檔區域參考端api下的getPicture以及ajax的使用，伺服器如何處理接收圖片然後返回圖片地址，請咨詢相應語言伺服器開發的專業人士。