jquery文件非同步上傳

㈠ jsp中使用jquery的ajaxfileupload插件怎麼實現非同步上傳

<script type=text/javascript src=js/jquery.js</script <script type=text/javascript src=js/ajaxfileupload.js</script <!-- 執行上傳文件操作的函數 -- <script type=text/javascript function ajaxFileUpload(){ $.ajaxFileUpload({url:'update.do?method=uploader', //需要鏈接到伺服器地址 secureuri:false, fileElementId:'houseMaps', //文件選擇框的id屬性 dataType: 'xml', //伺服器返回的格式，可以是json success: function (data, status) //相當於java中try語句塊的用法{$('#result').html('添加成功');}, error: function (data, status, e) //相當於java中catch語句塊的用法{$('#result').html('添加失敗');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data <input type=file id=houseMaps name=houseMaps/ <input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html伺服器代碼： public class UpdateAction extends DispatchAction { public ActionForward uploader(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { UpFormForm upFormForm = (UpFormForm) form; FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream(); File file = new File(D:/ + ff.getFileName()); //指定文件存儲的路徑和文件名 OutputStream os = new FileOutputStream(file); byte[] b = new byte[1024]; int len = 0; while((len = is.read(b)) != -1){ os.write(b, 0, len);}os.close(); is.close(); } catch (Exception e) {

㈡ img如何接收jquery ajax非同步上傳的動態圖片

你的表述沒看懂，jquery 非同步上傳過後獲取路徑 直接給img 的src賦值不就完了？

㈢ jquery上傳文件是怎麼實現的

本篇文章是對Jquery中的LigerUI實現文件上傳的方法，進行了分析介紹，需要的朋友可以參考下
一、在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
二、Html中的Div代碼

復制代碼 代碼如下:
<div id="AppendBill_Div" style="display:none;"> <%-- 上傳 - 單 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
圖標:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
</div>

三、Js中-寫的是關鍵部分，會LigerUI的朋友-你懂得
1、grid中添加項【存地址欄位】
{ display: "掃描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加項【存地址和彈出選擇框】
{ name: "AppendBillPath1", type: "hidden" }, // --上傳-【5】--
{ display: "掃描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上傳-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【掃描件】 // --上傳-【7】--
3、事件
// #region ======================================= 【上傳掃描件窗口】 // --上傳-【8】--
復制代碼 代碼如下:
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 單號
if (imageurl.length == 0) {
LG.showError("您沒有輸入單號，請輸入隨單號！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}
else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加圖標',
width: 360, height: 170, top: 170, left: 280, // 彈出窗口大小
buttons: [
{ text: '上傳', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
function AppendBillPath_save()
{
var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();
var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{
LG.showError("請上傳jpg,jpep,png,gif,bmp格式的圖片文件");
return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);
$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上傳-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路徑
// $("#AppendBillPath2").val(Data);

LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion

四、後台cs，寫一句關鍵的，可以返回參數，前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 執行上傳操作

㈣ 使用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)]

更多用法可以 參考官網

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

可以使用 jquery.form.js, 詳細使用方法可以網路.

㈥ 求一段JS或Jquery非同步上傳圖片的代碼

圖片和文件等流媒體 上傳都是靠from表單的提交。

你可以設置一個隱藏的from表單

裡面有個<input id='file' type='file'>

選擇玩圖片之後賦值給file

然後用jquery from表單提交即可

<formid="form"runat="server"enctype="multipart/form-data">
<inputid='file'type='file'>
</from>

$.ajax({
url:'XXXX',//上傳後台路徑
data:$('#form').serialize(),
type:"POST",
success:function(){

}
});

㈦ jQuery 怎麼發送非同步請求

$.ajax:基礎方法
語法:jQuery.ajax([settings])
.load:載入遠程 HTML 文件代碼並插入至 DOM 中
語法:load( url, [data], [callback] )
$.get:使用GET方式來進行非同步請求
語法:jQuery.get( url, [data], [callback] )
$.post:使用POST方式來進行非同步請求
語法:jQuery.post( url, [data], [callback], [type] )
$.getScript:通過 GET 方式請求載入並執行一個 JavaScript 文件
語法:jQuery.getScript( url, [callback] )

jQuery.ajax( options ) : 通過 HTTP 請求載入遠程數據
這個是jQuery 的底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。
$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象，但特殊情況下可用於手動終止請求。
注意： 如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。錯誤的 MIME 類型可能導致不可預知的錯誤。見 Specifying the Data Type for AJAX Requests 。
當設置 datatype 類型為 'script' 的時候，所有的遠程(不在同一個域中)POST請求都回轉換為GET方式。
設置async參數：
(默認: true) 默認設置下，所有請求均為非同步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。
$.ajax({

type: "get",

url: "http://www.cnblogs.com/rss",

beforeSend: function(XMLHttpRequest){

//ShowLoading();
},
success: function(data, textStatus){

$(".ajax.ajaxResult").html("");

$("item",data).each(function(i, domEle){

$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");

});

},

complete: function(XMLHttpRequest, textStatus){

//HideLoading();
},
error: function(){

//請求出錯處理
}
});

㈧ 怎麼樣通過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");
}
});

㈨ jQuery-File-Upload怎麼清空

jquery非同步上傳，一般來說這里上傳調用的是系統專門上傳的action，上傳好後返回上傳文件信息。你這里result.files就是返回的上傳結果。這個需要你在後台自己封裝。你前端需要什麼，後台就封裝什麼。比如我以前寫過一個=newHashMap();fileinfo.put("size",size);//原始文件大小fileObject.put("original",original);//原始文件唯一標識fileObject.put("originalPath",originalPath);//原始文件臨時存儲目錄fileObject.put("thumb",thumb);//圖片的預覽文件唯一標識fileObject.put("thumbPath",thumbPath);//圖片預覽文件臨時存儲目錄fileObject.put("name",fileFileName);//原始圖片名稱fileObject.put("url",url);//原始圖片的web查看地址,這個可以設置img.src屬性fileObject.put("thumbnailUrl",thumbnailUrl);//預覽圖片的web查看地址fileObject.put("contentType",fileContentType);//上傳文件typefileObject.put("deleteType","POST");//這是我自己封裝的post刪除//這個是我自己封裝的刪除路徑fileObject.put("deleteUrl",super.getRequest().getContextPath()+"/removeUpload.do?id="+original);Map[]fileArray=newHashMap[1];fileArray[0]=fileObject;JSONObjectjsonObject=newJSONObject();jsonObject.put("files",JSONArray.fromObject(fileArray));HttpServletResponseresponse=getResponse();response.setContentType("application/json;charset=UTF-8");response.getWriter().write(jsonObject.toString());response.getWriter().flush();而前斷可以將上傳文件的唯一標識放到一個隱藏域里，表單提交的時候一起提發送到後台，再根據唯一標識去取上傳文件信息或寫或復制轉移。前斷fileuploaddone我是這么用的12345678910111213141516on('fileuploaddone',function(e,data){//上傳結果$.each(data.result.files,function(index,file){if(file.url){varlink=$('').attr('target','_blank').prop('href',file.url);//這個是文件上傳後的展示區域，可以在fileuploadadd事件里構建var$imgdiv=$(data.context.children()[index]);var$link=$imgdiv.find("canvas").wrap(link);$imgdiv.append($('').prop('value',file.original));$imgdiv.append($('').prop('value',file.name));}elseif(file.error){varerror=$('').text(file.error);$(data.context.children()[index]).append(error);}});})

㈩ jsp中使用jquery的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;
}
}
轉載，僅供參考。