jqajax文件上傳

㈠ javascript js ajax 麻煩各位幫忙設計一個圖片上傳的系統，最好有詳細的代碼。

具體思路是，上傳圖片時，放入臨時目錄，上傳完成後，對圖片生成uuid，重命名並已入圖版片文件權夾，在資料庫中記錄uuid與商品id的對應關系。

插件的問題，jquery-file-upload我沒用過，不過看了github上的文檔，感覺說得蠻詳細的。後端的也有涉及。node的部分使用express的中間件jquery-file-upload-middleware，你在github上搜這個吧，有很詳細的前後端的示例代碼。

如果你想要用原生的也很簡單。利用html5的上傳介面，或者使用iframe做個隱藏表單就行了。後端node部分，就是解析req的body部分，並且把他們寫入文件。因為是數據流，可以使用更快地流寫入方式。

㈡ on綁定的change去觸發formData上傳文件

首先，jq 是change事件，onchange是js的 其次，change事件是當你上傳文件改變時觸發，也就是 value 值改變時觸發

㈢ 當點擊帶+的圖片時，彈出手機相冊，可以選擇手機相冊內的圖片上傳，代碼如何寫怎麼實現

首先需要引用 js 和css

<!--上傳控制項-->
2<scriptsrc="query.form.min.js"></script>
3<linkhref="Img_List.css"rel="stylesheet"/>
4<scriptsrc="Img_List.js"></script>

Img_List.js 如下：

///<referencepath="../../script/jquery-1.8.0.min.js"/>
//顯示
functionimgshow(obj){
//$(obj).find("a").show();
}

//隱藏
functionimghide(obj){
//$(obj).find("a").hide();
}

//上傳
functionupload(){
$("#FileLoad").click();
}

//刪除
functionimgdel(listId,FileId,hfId){

$.post("/CommonMole/ashx/public.ashx?action=DelMessageImg&Files="+$("#"+hfId).val(),function(result){
if(result!="ok")
$.messager.alert("消息提示","刪除失敗!");
});
varhtml="<li><imgsrc="/Themes/Images/jia.jpg"style="height:80px;width:80px;"/><inputtype="file"id=""+FileId+""class="input"onchange="ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');"name=""+FileId+""/></li>"
$("#"+listId).html(html);
}

//添加成功
functionimgaddhtml(data,code,listId,fileId,hfId){
varlist=data.split(',');
varhtml="<lionmouseover="imgshow(this)"onmouseout="imghide(this);">";
html+="<astyle="height:80px;width:80px;"href=""+list[0]+""target="_blank"><imgsrc=""+list[0]+""imgs=""+list[0]+""code=""+code+""/></a><spanonclick="imgdel('"+listId+"','"+fileId+"','"+hfId+"')"></span></li>";
$("#"+listId).html(html);
}

//圖片文件上傳
//uppath上傳空間id
//上傳成功存放的圖片路徑的隱藏域id
//listId顯示圖片的區域id
functionImgUpload(uppath,hndimg,listId){
varsendUrl="/CommonMole/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath="+uppath;
//開始提交
$("#form1").ajaxSubmit({
beforeSubmit:function(formData,jqForm,options){
//alert(1);
},
success:function(data,textStatus){
varlist=$("#"+hndimg).val();
$("#"+hndimg).val(data.msgbox);
imgaddhtml(data.msgbox,0,listId,uppath,hndimg);
},
error:function(data,status,e){
alert("上傳失敗！");
},
url:sendUrl,
type:"post",
dataType:"json",
timeout:600000
});
};
Img_List.css如下：
.img_list{margin:0px;padding:0px;overflow:hidden;}
.img_listul,.img_listulli{margin:0px;padding:0px;}
.img_listulli{float:left;list-style:none;position:relative;margin:5px0px0px5px;}
.img_listullispan
{position:absolute;top:3px;right:3px;width:16px;height:16px;opacity:0.6;filter:alpha(opacity=60);margin:0002px;
vertical-align:top;background:url('/Themes/Images/panel_tools.png')no-repeat-16px0px;}
.img_listulliimg{width:80px;height:80px;cursor:pointer;position:relative;z-index:0;}
.img_listulli.input{width:80px;height:80px;cursor:pointer;position:relative;left:-100px;vertical-align:top;margin:0px;padding:0px;opacity:0;filter:alpha(opacity=0);}

panel_tools.png 如下：

#region上傳單文件處理===================================
46privatevoidSingleFile(HttpContextcontext)
47{
48
49string_refilepath=context.Request.QueryString["ReFilePath"];//取得返回的對象名稱
50string_upfilepath=context.Request.QueryString["UpFilePath"];//取得上傳的對象名稱
51string_delfile=context.Request.QueryString[_refilepath];
52HttpPostedFile_upfile=null;
53try
54{
55_upfile=context.Request.Files[_upfilepath];
56}
57catch(Exceptione)
58{
59context.Response.Write("{"msg":"0","msgbox":"上傳文件過大！"}");
60context.Response.End();
61}
62bool_iswater=false;//默認不打水印
63bool_isthumbnail=false;//默認不生成縮略圖
64bool_isimage=false;
65
66if(context.Request.QueryString["IsWater"]=="1")
67_iswater=true;
68if(context.Request.QueryString["IsThumbnail"]=="1")
69_isthumbnail=true;
70if(context.Request.QueryString["IsImage"]=="1")
71_isimage=true;
72
73if(_upfile==null)
74{
75context.Response.Write("{"msg":"0","msgbox":"請選擇要上傳文件！"}");
76return;
77}
78UpLoapFiles=newUpLoad();
79stringmsg=upFiles.fileSaveAs(_upfile,_isthumbnail,_iswater,_isimage);
80//刪除已存在的舊文件
81Utils.DeleteUpFile(_delfile);
82//返回成功信息
83context.Response.Write(msg);
84
85context.Response.End();
86}
87#endregion

101publicstringfileSaveAs(HttpPostedFilepostedFile,boolisThumbnail,boolisWater,bool_isImage,bool_isReOriginal)
102{
103try
104{
105stringfileExt=Utils.GetFileExt(postedFile.FileName);//文件擴展名，不含「.」
106stringoriginalFileName=postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"")+1);//取得文件原名
107stringfileName=Utils.GetRamCode()+"."+fileExt;//隨機文件名
108stringdirPath=GetUpLoadPath();//上傳目錄相對路徑
109
110//檢查文件擴展名是否合法
111if(!CheckFileExt(fileExt))
112{
113return"{"msg":"0","msgbox":"不允許上傳"+fileExt+"類型的文件！"}";
114}
115//檢查是否必須上傳圖片
116if(_isImage&&!IsImage(fileExt))
117{
118return"{"msg":"0","msgbox":"對不起，僅允許上傳圖片文件！"}";
119}
120//檢查文件大小是否合法
121if(!CheckFileSize(fileExt,postedFile.ContentLength))
122{
123return"{"msg":"0","msgbox":"文件超過限制的大小啦！"}";
124}
125//獲得要保存的文件路徑
126stringserverFileName=dirPath+fileName;
=dirPath+"small_"+fileName;
128stringreturnFileName=serverFileName;
129//物理完整路徑
130stringtoFileFullPath=Utils.GetMapPath(dirPath);
131//檢查有該路徑是否就創建
132if(!Directory.Exists(toFileFullPath))
133{
134Directory.CreateDirectory(toFileFullPath);
135}
136//保存文件
137postedFile.SaveAs(toFileFullPath+fileName);
138//如果是圖片，檢查圖片尺寸是否超出限制
139if(IsImage(fileExt))
140{
141Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+fileName,3000,3000);
142}
143//是否生成縮略圖
144if(IsImage(fileExt)&&isThumbnail)
145{
146Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+"small_"+fileName,150,150,"R");
147//returnFileName+=","+serverThumbnailFileName;//返回縮略圖，以逗號分隔開
148}
149
166/
171return"{"msg":"1","msgbox":""+returnFileName+""}";
172}
173catch
174{
175return"{"msg":"0","msgbox":"上傳過程中發生意外錯誤！"}";
176}
177}

㈣ javascript ajaxsubmit提交 提示下載信息

這個是我網路找的，很適合你哦。這種問題多用Google哦，配合關鍵字搜索很容易搜到想要的。

今天在使用jquery.form插件的ajaxSubmit上傳文件時，在IE、chorme下測試，老是出現下載文件的提示框，谷歌網路了半天，基本沒有人說明是什麼原因的，在查看了jquery.form的源碼時，發現了下面的代碼：

if (options.iframe !== false && (options.iframe || shouldUseFrame)) {
if (options.closeKeepAlive) {
$.get(options.closeKeepAlive, function() {
fileUploadIframe(a);
});
}
else {
fileUploadIframe(a);
}
}
else if ((hasFileInputs || multipart) && fileAPI) {
fileUploadXhr(a);
}
else {
$.ajax(options);
}

在ajaxSubmit提交表單的時候，如果表單內有文件上傳的話，會判斷參數是否配置的iframe為false參數，如果沒有，會用創建隱藏iframe方式提交表單，如果設定了iframe為false，則判斷瀏覽器是否支持HTML5的fileAPI，支持就直接使用XHR方式提交，否則就當作普通表單提交。

所以因為是用隱藏iframe提交的表單，如果伺服器返回的是「application/json」類型的數據，IE和Chrome默認是下載文件的，因為內容是返回給了iframe，而不是ajaxSubmit的success方法。在iframe載入了返回結果後，ajaxSubmit的success方法是去讀取iframe的內容來轉換成json對象使用。
解決辦法就是，在ajaxSubmit提交表單的配置裡面，增加一個參數，伺服器端判斷是否是ajaxSubmit提交過來的表單，是的話就返回「text/html」類型的內容，不是就可以返回「application/json」的。
簡單的說就是ajaxSubmit上傳文件的話，返回的內容只能是網頁內容的，否則IE就有可能出現下載提示框。

㈤ 使用PHP Yii2.0框架上傳圖片的時候出現下面錯誤

jq的版本問題，新版本jq取消了xhr.getResponseHeader 這個方法。可以修改jq的版本，或者手動添加xhr.getResponseHeader 方法到jq文件去

㈥ 求幫忙寫一個非同步上傳文件的程序，JQ要求使用post傳值方式

這個文件是jQuery的Ajax文件上傳的組件，先引入jq再引入這個文件。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">

var name=$("#name").val();
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'目標文件',
secureuri:false,
fileElementId:'img',

data:name,
type:'POST',

success: function (end) //end為返回值
{
// 返回處理
}
}
)

return false;
}
</script>

<input id="img" type="file" size="45" name="img" class="input">

<input id="name" type="text" size="45" name="name" class="input">

<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

後台可以用$_FILES接收文件信息，$_POST['name']接收文件名，與普通提交文件處理流程一致。