m0_37928829
Forsaken12345
2018-03-29 06:44
采纳率: 79.2%
浏览 5.9k

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请求,照上面那函数还没选文件就发出请求了

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • z562743237
    zsc我行我素 2018-03-29 06:51
    已采纳

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

    点赞 评论
  • qq_17779423
    qq_17779423 2018-03-29 06:49

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

    点赞 评论
  • qq_20257855
    qq_20257855 2018-03-29 06:56

    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)
    //     }
    // })
    

    }

    点赞 评论
  • zhengli_uuu
    zhengli_uuu 2018-04-11 02:47



    选择文件

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

    点赞 评论

相关推荐