jquery ajax上传文章且依靠点击其他按钮触发f o r m 表单中的file型的input框

   小小普罗格瑞姆（programmer）做的一些笔记，有错还请各位大神批评指正。

  今天完成了一个前端中出现的问题，这几天在完成实验室里的一个项目时遇到这样一个有意思的问题，我也摸索出了一个解决办法。我们在用ssm框架中，SpringMVC中经常使用到的就是form表单中加上input框来完成上传任务就像这样。

<form action="/uploadMaterial.action" method="post" enctype="multipart/form-data">
    <input type="file" name="mf">
    <input type="submit" value="上传">
</form>

  在前端还是一样设置一个隐藏的form表单，以及其中某些值也是隐藏的：

<form id="upLoadfile" enctype="multipart/form-data" hidden>
    <input type="file" name="mf" id="mf" style="display:none" multiple>
    <input type="text" id="filename">
    <input type="text" name="id" id="id" hidden>
</form>

  我们最后想达到的一个效果就是点击其他按钮，能够触发点击这个input框类型为fie的效果一样。我们给出这样一个js中的函数

function openBrowse(){
    var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
    if(ie){
        document.getElementById("mf").click();
        document.getElementById("filename").value=document.getElementById("mf").value;
    }else{
        var a=document.createEvent("MouseEvents");//FF的处理
        a.initEvent("click", true, true);
        document.getElementById("mf").dispatchEvent(a);
        document.getElementById("filename").value=document.getElementById("mf").value;
        alert("请上传文件");
        setTimeout("upLoadDocument()",1000);
    }
}

//上传文档以此触发ajax提交
function upLoadDocument() {
    alert(userId);
    $("#id").val(userId);
    var urlRootContext= getRootContext();
    $("#upLoadfile").ajaxSubmit({
        type:"POST",
        url:urlRootContext+"/api/doc/uploadDocument",
        contentType:"application/x-www-form-urlencoded;charset=utf-8",
        dataType:"json",
        success:function (data) {
            console.log(data);
            alert("上传成功~");
            document.getElementById("filename").value="";
            document.getElementById("mf").value="";
        },
        error:function (data) {
            console.log(data);

        }
    })

}

  
  界面如下，当我点击导入时：

就会触发效果：

  但是一直有个问题，就是

对于这一行代码，当我这里出发了这个点击事件时，他还没等我选文件，他就开始运行upLoadDocument功能，如果我这里不用一个setTimeout去控制时间，那么他就直接执行上传功能了，就会报错，因为根本就没有赋值。所以我这里只好用一个alert去控制这个代码，在客户选择好文件后再去点击alert里面的确定，以免出现还没选择文件就已经执行上传功能这种现象，然后在upLoad当中也在上传成功后对文本框和文件框中的值进行清零，以免出现最开始出现的一个文件传两次才能传上去的现象。

  这个一步步的调才能看到效果。

  不知道各位大神有没有更好的办法呢？

最后

以上就是害怕小海豚为你收集整理的jquery ajax上传文章且依靠点击其他按钮触发f o r m 表单中的file型的input框的全部内容，希望文章能够帮你解决jquery ajax上传文章且依靠点击其他按钮触发f o r m 表单中的file型的input框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。