注意啦:本文的代码都是以JQuery为示例,jq_开头的变量都是jq对象。

在HTML5中,我们可以在图片上传之前对图片进行预览,就像下面这么做

 jq_upload_file.change(function(){
jq_img.attr("src",window.URL.createObjectURL(this.files.item(0)));
jq_div.css("backgroundImage","url("+window.URL.createObjectURL(this.files.item(0))+")");
});//end change

那么异步上传文件,就只需要利用HTML5中的FormData,也就是这样:

 $.extend({
AjaxUploadFile:function(url,formData,success,failure){
var oReq = new XMLHttpRequest();
oReq.open( "POST", url , true );
oReq.onload = function(oEvent) {
if (oReq.status == 200)
{
if(typeof success=="function") success(oReq);
}
else
{
if(typeof failure=="function") failure(oReg);
}
};
oReq.send(formData);
}
});

调用:

 var form=new FormData();
form.append("pic",jq_upload_file.get(0).files[0]);
//关于这里,其他文章有提到,可以直接传个DOM节点进去,即form.append("pic",jq_upload_file.get(0))
//另外,对于FormData可以将整个表单form的节点传入,形成一个完整的FormData,即var form=new FormData(jq_form.get(0))
$.AjaxUploadFile(
"上传的URL",
form,
function(oReq){
//处理oReq.responseText
}
);

当然,上传之前,可能需要先验证一下文件大小、类型等等:

 $.extend({
CheckUploadFile:function(jq_input_file){
if(jq_input_file.get(0).files.item(0).size>300*1024)
{
return "文件大于300KB,无法上传";
}
var allow_pic=["jpg","jpeg","png","gif"];
var flag=false;
for(var i in allow_pic)
{
if(jq_input_file.get(0).files.item(0).type.indexOf(allow_pic[i])!=-1)
{
flag=true;
break;
}
}
return flag?"":"指定的文件格式无法上传";
}
});

随机推荐

  1. linux 7z 命令编译安装

    7zip是一个开源的压缩软件  7z格式是压缩率最高的格式 服务器备份 数据几个g 要是tar压缩下载的话 时间太长  7zip压缩出来体积很小 首先安装 我这是 centos的 直接可以  yum ...

  2. spring.Net之Ioc在MVC中的使用

    1.引入dll Common.Logging.dll Spring.Core.dll Spring.Web.dll Spring.Web.Extensions.dll Spring.Web.Mvc4. ...

  3. 如何在Ubuntu 14.04中安装最新版Eclipse

    想必很多开发人员都知道,Ubuntu 软件源中提供的并不是最新版本的 Eclipse,本教程就教大家如何在 Ubuntu 14.04 中快速安装 Eclipse 官方发布的最新版本. 到目前为止,Ec ...

  4. 让java程序在后台一直执行(例如putty关闭后后台程序继续运行)

    如果在终端中执行java -jar xxx.jar&命令,当终端关闭时,xxx.jar也会同时结束运行,但是如果执行nohup java -jar xxx.jar&命令,则程序会在后台 ...

  5. MongoDB复制集之将现有的单节点服务器转换为复制集

    服务器情况:   现有的单节点 Primary     192.168.126.9:27017   新增的节点    Secondry  192.168.126.8:27017    仲裁节点     ...

  6. Regression:Generalized Linear Models

    作者:桂. 时间:2017-05-22  15:28:43 链接:http://www.cnblogs.com/xingshansi/p/6890048.html 前言 本文主要是线性回归模型,包括: ...

  7. Kotlin For Android 示例代码实战

    下面就为大家介绍怎么使用Kotlin来开发Android 上面这篇中我们在下载Kotlin插件的时候也下了一个功能扩张插件,其实这个插件大有用处,它可以使得我们在不使用注解和第三方库的情况下不使用fi ...

  8. SpringBoot2.0之六 多环境配置

    开发过程中面对不同的环境,例如数据库.redis服务器等的不同,可能会面临一直需要修改配置的麻烦中,在以前的项目中,曾通过Tomcat的配置来实现,有的项目甚至需要手动修改相关配置,这种方式费时费力, ...

  9. <笔记>Apache+PHP+MYSQL配置

    (1)Apache的the requested operation has failed错误: cmd—输入netstat –ano,可看到80端口已被进程占用,PID为4 打开任务管理器—〉查看—〉 ...

  10. 在exe运行界面按右键(不用按鼠标右键)

    单击该键 用于夜晚在exe运行界面粘贴数据.(正常来说直接按右键即可) 从此粘贴数据不会影响睡觉的人……etc.在宿舍……