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;
}
}
转载，仅供参考。