jqueryajax文件上传
Ⅰ ajax如何实现跨域上传文件
ajax跨域实现方法之跨子域实现ajax：
要求：实现hello.com的页面 异步请求 blog.hello.com下的页面
实现方法：借助iframe，通过设置iframe的src属性，嵌入blog.hello.com下的一个页面，比如AjaxProxy.jsp,然后由该页面去请求Ajax
AjaxProxy请求完毕后，通过parent对象把返回的数据回传给hello.com的主页面。因此，真正的异步请求还是发生在blog.hello.com的域名下
注意：通过这种方法实现的跨子域ajax请求，需要在hello.com的请求页面以及AjaxProxy.jsp页面中设置同样的域名，也就是document.domain = "coolkissbh.com";
注意：关于设置domain的问题，如果是跨全域，使用上面方法时候，firefox下会提示
Illegal document.domain value" code: "1009的错误，因此跨全域只能使用第二种方法处理返回的数据：AjaxProxy.jsp将ajax返回的数据保存到一个全局变量中，hello.com通过setInterval定时去判断iframe的页面是否加载完成,如果加载完成，则获取AjaxProxy.jsp的全局变量值。然后再做其它处理。
Ⅱ jQuery+ajax文件上传失败，什么原因
大部分 都是超出了 服务器的上传大小限制
还有就是 ajax 上传类型是否正确设置 ，类型转换检查错误没，示例代码：
var data = new FormData();
data.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'ajax.php',
data: data,
processData: false,
type: 'POST'
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data',
success: function (data) {
alert(data);
}
});
Ⅲ jquery ajax多图上传显示怎么写
首先我们在页面上放置个上传按钮，使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。
<a class="btn" id="btn">上传图片</a> 最大500KB，支持jpg，gif，png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
接着，加载jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
当点击按钮“上传图片”后，弹出选择文件对话框，按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法，开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度，最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台，会发现上传一张图片，会向后台ajax.php请求一次。
var uploader = new plupload.Uploader({ //创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4',
//上传插件初始化选用那种方式的优先级顺序
browse_button: 'btn',
// 上传按钮
url: "ajax.php",
//远程上传地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允许文件上传类型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if ($("#ul_pics").children("li").length > 30) {
alert("您上传的图片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍历文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中，显示进度条
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();
Ⅳ 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;
}
}
转载，仅供参考。
Ⅳ 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");
}
});
Ⅵ jqueryajax不能上传图片
不能上传的原因可能是jquery插件使用不正确。
解决方法：
1、在head之间加入jquery引用
<scripttype="text/javascript" src="jquery.js"></script>
<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>
<scriptsrc="project/js/fileload.js" type="text/javascript"></script>
2、定义fileload.js，代码如下：
function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">请选择文件：</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上传"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg"> </div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">图片预览：</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}
function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名：" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上传失败：" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上传失败");
}
});
return false;
});
$("#_fileForm").submit();
}
3、服务端处理上传。
protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//开始上传
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);
}
catch(Exception ex)
{
Response.Write("0|error|上传提交出错");
}
}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//获取要保存的文件信息
string filerealname = httpFile.FileName;
//获得文件扩展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//检查保存的路径 是否有/结尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";
//按日期归类保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}
//物理完整路径
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;
//检查是否有该路径 没有就创建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
//得到服务器文件保存路径
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//将文件保存至服务器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上传成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上传失败,错误原因：" + e.Message;
}
}
/// <summary>
/// 获取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 检查是否为合法的上传文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;
}
public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}
4、运行defualt.aspx页面以后显示的效果是：
Ⅶ Jquery/ajax 如何以put方式上传文件
using System.Data.OleDb;
using System.Data;
namespace _211
{
/// <summary>
/// DBQuery 的摘要说明。
/// </summary>
public sealed class DBQuery
{
static OleDbConnection conn=DBConnection.getConn();
static DataTable dt;
public static DataTable OpenQuery(string sql)
{
OleDbDataAdapter da=new OleDbDataAdapter(sql,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName)
{
OleDbDataAdapter da=new OleDbDataAdapter("select * from "+TableName,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count)
{
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" * from "+TableName,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,string IndexColumn,bool IsAsc)
{
OleDbDataAdapter da=new OleDbDataAdapter("select * from "+TableName+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc"),conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count,string IndexColumn,bool IsAsc)
{
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" * from "+TableName+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc"),conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,string[] column,bool IsCondition)
{
string tempsql="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)
{
if(IsCondition)
tempsql+=" and ";
else
tempsql+=",";
}
}
;
string sql="";
if(IsCondition)
sql="select * from "+TableName+" where "+tempsql;
else
sql="select "+tempsql+" from "+TableName;
OleDbDataAdapter da=new OleDbDataAdapter(sql,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,string[] column,string[] condition)
{
string tempsql="";
string tempsql2="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
for(int i=0;i<condition.Length;i++)
{
tempsql2+=condition[i];
if(i<condition.Length-1)tempsql2+=" and ";
}
OleDbDataAdapter da=new OleDbDataAdapter("select "+tempsql+" from "+TableName+" where "+tempsql2,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count,string[] column)
{
string tempsql="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" "+tempsql+" from "+TableName,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count,string[] column,string[] condition)
{
string tempsql="";
string tempsql2="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
for(int i=0;i<condition.Length;i++)
{
tempsql2+=condition[i];
if(i<condition.Length-1)tempsql2+=" and ";
}
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" "+tempsql+" from "+TableName+" where "+tempsql2,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count,string[] column,string IndexColumn,bool IsAsc)
{
string tempsql="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" "+tempsql+" from "+TableName+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc"),conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,int count,string[] column,string[] condition,string IndexColumn,bool IsAsc)
{
string tempsql="";
string tempsql2="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
for(int i=0;i<condition.Length;i++)
{
tempsql2+=condition[i];
if(i<condition.Length-1)tempsql2+=" and ";
}
OleDbDataAdapter da=new OleDbDataAdapter("select top "+count.ToString()+" "+tempsql+" from "+TableName+" where "+tempsql2+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc"),conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,string[] column,string IndexColumn,bool IsAsc,int PageSize,int Page)
{
string tempsql="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
string sql="";
if(Page==0)
sql="select top "+PageSize.ToString()+" "+tempsql+" from "+TableName+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc");
else
sql="select top "+PageSize.ToString()+" "+tempsql+" from "+TableName+" where "+IndexColumn+(IsAsc?">":"<")+"(select "+(IsAsc?"max":"min")+"("+IndexColumn+") from "+TableName+" where "+IndexColumn+" in (select top "+(Page*PageSize)+" "+IndexColumn+" from "+TableName+" order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc")+")) order by "+IndexColumn+" "+(IsAsc?"Asc":"Desc");
OleDbDataAdapter da=new OleDbDataAdapter(sql,conn);
dt=new DataTable();
try
{
da.Fill(dt);
}
catch(Exception ex)
{
throw ex;
}
finally
{
da.Dispose();
}
return dt;
}
public static DataTable OpenTable(string TableName,string[] column,string[] condition,string IndexColumn,bool IsAsc,int PageSize,int Page)
{
string tempsql="";
string tempsql2="";
for(int i=0;i<column.Length;i++)
{
tempsql+=column[i];
if(i<column.Length-1)tempsql+=",";
}
for(int i=0;i<condition.Length;i++)
{
tempsql2+=condition[i];
if(i<condition.Length-1)tempsql2+=" and ";
}
Ⅷ jquery不使用插件通过ajax方法上传文件
传统的表单也需要定义“multipart/form-data”这样的方式，就是将文件转成二进制流上传到服务器。而jquery的ajax本身貌似本身并没有办法读取本地的文件形成二进制流上传到服务器。只能用插件来实现。
Ⅸ jquery 的$ajax;能实现AJAX上传文件吗
用formData对象
把files对象放到formData中去
也可以使用fileReader对象来获取文件的base64编码，然后把base64编码直接post给后台。
Ⅹ Jquery AjaxForm插件上传文件是如何跨域实现的
用jsonp。你网络一下jsonp就知道了。
JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。