jquerypost上傳圖片

❶ 使用jquery.form.js實現文件上傳及進度條前端代碼

ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。

去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]

將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[圖片上傳失敗...(image-3d6ae0-1548557865446)]

[圖片上傳失敗...(image-9f0adf-1548557865446)]

更多用法可以 參考官網

❷ jquery的post方法上傳文件問題。

用jQuery 的Ajax文件上傳的組件：ajaxfileupload.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //你處理上傳文件的服務端
secureuri:false,
fileElementId:'img',
dataType: 'json',
success: function (data)
{
alert(data.file_infor);
}
}
)

return false;
}
</script>

<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

❸ jquery怎樣限制上傳圖片的大小和像素寬高，解析度

<scripttype="text/javascript">
functionvalidate_img(a){
varfile=a.value;
if(!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)){
alert("圖片類型必須是.gif,jpeg,jpg,png中的一種");
returnfalse;
}else{
varimage=newImage();
image.src=file;
varheight=image.height;
varwidth=image.width;
varfilesize=image.filesize;
	alert(height+"x.."+filesize);
if(width>80&&height>80&&filesize>102400){
alert('請上傳80*80像素或者大小小於100k的圖片');
	returnfalse;
}
}
alert("圖片通過");
}
</script>
圖像:<inputtype="file"name="uploadImg"onchange="Javascript:validate_img(this);"size="12"/>

測試的時候放伺服器上測試，本地不行的哈～

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

首先需要引用 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}

❺ 用jquery實現ajax 上傳圖片提交到PHP

好像不可以吧，瀏覽器為了安全不能用javascript讀取本地文件的

❻ 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

WebUploader項目，符合你的要求。

//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');

//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}

$percent.css('width',percentage*100+'%');
});
//文件上傳成功，給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});

//文件上傳失敗，顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');

//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}

$error.text('上傳失敗');
});

//完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});

更多細節，請查看js源碼。

❼ 有哪些好用的 jQuery 圖片上傳插件

1、uploadify
它是針對jQuery的免費文件上傳插件，可以輕松將單個或多個文件上傳到網站上，可控制並發上傳的文件數，通過介面參數和CSS控制外觀。Web伺服器需支持flash和後端開發語言。

2、FancyUpload
它是一個由CSS和XHTML編寫樣式的Ajax文件上傳工具，安裝簡便，伺服器獨立，由MooTools模塊驅動，可以在任何現代瀏覽器上使用。

3、Aurigma Upload Suite(Image Uploader)
這是一個不限大小，不限格式的文件/圖片批量上傳工具，是收費控制項。它支持雲端存儲和客戶端文件處理，支持斷點續傳，穩定可靠。從8.0.8開始，Image Uploader將名稱改為"Aurigma Upload Suite"。

❽ web前端上傳圖片的幾種方法

下面給你介紹3種web前端上傳圖片的方法：

1.表單上傳

最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。

ajax無刷新上傳

Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。

3.各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。

如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。