JS点击按钮弹出文件选择框选择文件怎么做其他的操作,就单个按钮控件实现

JS点击按钮弹出文件选择框选择文件怎么做其他的操作,就单个按钮控件实现

问题描述:

button:

                         <button class="btn btn-primary" onclick="upload()">上传   <span class="glyphicon glyphicon-open"></span></button>

upload函数:

 function upload() {
    var inputObj=document.createElement('input')
    inputObj.setAttribute('id','file');
    inputObj.setAttribute('type','file');
    inputObj.setAttribute('name','file');
    inputObj.setAttribute("style",'visibility:hidden');
    document.body.appendChild(inputObj);
    inputObj.value;
    inputObj.click();
    console.log(inputObj)

    // var formdata = new FormData($("#file")[0]);
    // $.ajax({
    //     url:"http://localhost:8080/file/upload.action",
    //     type:"POST",
    //     data:formdata,
    //     enctype:"multipart/form-data",
    //     contentType:false,
    //     processData:false,
    //     success:function (data) {
    //         console.log(data)
    //     }
    // })
}

这里打开只能出现文件选择框:
图片说明
怎么在upload函数中继续做ajax请求,照上面那函数还没选文件就发出请求了

可以在你动态创建的input绑定一个change事件,在change事件里执行ajax上传文件,你在upload方法里直接写ajax肯定会立即执行

选择文件后,点击提交,发请求

function upload() {
var inputObj=document.createElement('input')
inputObj.setAttribute('id','file');
inputObj.setAttribute('type','file');
inputObj.setAttribute('name','file');
inputObj.setAttribute("style",'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.value;
inputObj.click();
console.log(inputObj)

// var formdata = new FormData($("#file")[0]);
// $.ajax({
//     url:"http://localhost:8080/file/upload.action",
//     type:"POST",
//     data:formdata,
//     enctype:"multipart/form-data",
//     contentType:false,
//     processData:false,
//     success:function (data) {
//         console.log(data)
//     }
// })

}



选择文件

然后在change事件中发请求即可