Question

我想用jquery实现只要<input type="file"/>的值改变我就把input里的文件通过ajax传到服务器

求高手

Answer 1

引入jQuery库
引入ajaxfileupload.js上传插件库(这也是jQuery的一个插件)
以ASP.NET为例

<input type="file" id="uploadfile" name="uploadfile"/>
<script type="text/javascript">
$("#uploadfile").change(function(){

$.ajaxFileUpload({
url: '../ajax/AjaxCallback.ashx',//处理上传用的后台程序,可以是PHP,也可以是ASP等
secureuri: false,//异步
fileElementId: 'uploadfile',//上传控件ID
dataType: 'json',//返回的数据信息格式
success: function(data, status) {
if (data.code == '10000') {
alert("上传成功");

} else {
alert("上传失败");
}
}, error: function(data, status, e) {
alert(e);
}
})

});

</script>
后台CS代码

/// <summary>
/// 图片上传
/// </summary>
private void ImageUpload()
{
Response.ContentType = "text/html";//这里一定要html
if (Request.Files.Count > 0)
{
HttpPostedFile file = Request.Files[0];
if (file.ContentLength > 0)
{
string suffix = file.FileName.Substring(file.FileName.LastIndexOf('.'));//后缀
if (".jpg.png.gif.jpeg".IndexOf(suffix.ToLower()) == -1)//文件格式,这里采用图片格式说明
{
Response.Write("{\"msg\":\"文件格式不正确!\",code:\"10001\"}");
return;
}

try
{
file.SaveAs(Server.MapPath("~/uploadfile/") + newName);
Response.Write("{\"msg\":\"" + newName + "\",code:\"10000\"}");
return;
}
catch (Exception ex)
{
Response.Write("{\"msg\":\"" + HttpUtility.HtmlEncode(ex.Message) + "\",code:\"10001\"}");
return;
}
}
Response.Write("{\"msg\":\"请选择要上传的文件!\",code:\"10001\"}");
return;
}
Response.Write("{\"msg\":\"请选择要上传的文件!\",code:\"10001\"}");
return;
}

Answer 2

定义input的id <input id = "content" type= "file" />
$(document).ready(function(){
$("#content").onchange(function(){
$.post(url,$("#content").text());
});
});

Answer 3

先给你说下使用ajax是不能够操作文件的。想通过无刷新上传建议使用swfupload

追问

swfupload 可以裁切图片吗？

追答

不可以

追问

有什么好头像上传带裁切的前端插件吗？谢谢

追答

这个你得上网查查

Answer 4

自定义的输入ID输入ID = "content" type= "file" p>
$（文件）。就绪（函数（）{

$（“＃内容”）。的onchange（函数（）{

美元。后（URL，$（“＃内容”）。文本（））;
>}）;
}）;

Answer 5

貌似ajax的方式没办法直接上传图片吧