input 上传文件至服务器,input标签如何选择文件后立即进行上传，并返回上传到服务器的路径...

有时候我们项目中会用到上传文件这个功能，大多数的时候会在提交简历，发布文章等情况下用到，但是由于form表单提交后会刷新页面，可能会导致其余数据未填写，那么如何避免呢？下面就让我教大家如何解决把。

首先，我们先写前端页面。

选择文件后即刻上传文件

这时候我们已经可以把文件打开放置到浏览器缓存中了，接下来就需要用到ajax的事件，来完成选择文件后触发某一事件。

$(document).ready(function(){

$("#tf").change(function(){

if($("#tf").val()=='')

return ;

ajaxFile();

});

});

事件添加好后，我们就要继续在ajaxFile中来完成对文件的上传操作了。在这里给大家说下FormData()

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keye->data)，而独立于表单使用。

function ajaxFile(){

var form = new FormData();

form.append("file",$('#tf')[0].files[0]);

$.ajax({

url:"./upload.php",

type:"post",

data:form,

processData:false,

contentType:false,

dataType:"json",

success:function(data){

$("#msg").html(data['msg']);

},

error:function(e){

alert("请求错误！！");

}

});

}

这样我们就完成了对文件的上传请求操作，后端部分就和from表单中提取文件流数据一样即可。下面贴上前后端整体代码(解压密码：www.mochoublog.com)。