input file选择文件后自动上传的代码

春天来了,花园里开满了花,有梅花,有迎春花,有山茶花,有丁香花,真是太好看了。

html 中 file 类型的 input 输入框,可以将本地的文件上传到网站的服务器,但它的上传需要 form 表单提交触发的。而今天我们要说一说,file 类型的输入框在选择本地文件后,自动上传的方法。

input file选择文件后自动上传

可以使用js代码中的FormData对象,利用 change 触发上传,

FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

代码如下:

html代码

<input type="file"  id="upLoad" >

jq代码

$('body').on('change','#upLoad',function(){
    var formData = new FormData();
    var name = $($(this)).val();
    var files = $($(this))[0].files[0];
    formData.append("file", files);
    formData.append("name", name);
    //另外加的参数
    formData.append("act", "PostImg"); 
    var index = layer.msg('正在提交中....');
    $.ajax({
        url: 'img.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false, 
        dataType: 'json',
        success:function (res) {
            alert('上传成功');
        }
        ,error:function (res) {
            alert('错误');
        }
    });
})

本文input file选择文件后自动上传的代码到此结束。不要为失败找借口,只为成功找方法。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法