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事件中发请求即可