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

莫愁
其他
2020-08-03

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

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

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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>选择文件后即刻上传文件</title>
</head>
<body>
<input type="file" id="tf" name="upfile" >
<div id="msg">
</div>
</body>
</html>

这时候我们已经可以把文件打开放置到浏览器缓存中了，接下来就需要用到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)。

upload.rar

f9ec3fc17b8650a4fc34b9c48ca73f1d.rar (1.73 KB)