Question

我是html / javascript的新手，并制作了两个可以上传图片的按钮（选择文件按钮和上传按钮）。

但是，我想只使用一个按钮，而不知道如何组合这两个按钮。我已经在谷歌搜索了，他们说我们可以使用onchange组合提交按钮，但我已经有onchange功能，可以在选择图像文件到iframe后立即显示图像。

以下是<form>

的html代码

 <form action="/upload", method="post", enctype="multipart/form-data">
   <div style='height:0px; width:0px; overflow:hidden;'><input type="file" name="upFile" id="upFile" onchange="getCmaFileView(this, 'name').submit()" target="dropzone_1"/></div>
 </form>

此外，这是我的脚本和按钮

<script type = "text/javascript">
  function getFile(){
    document.getElementById("upFile").click();
  }
</script>
...
    <li><a onclick="getFile()" style="cursor:pointer; color:#000000;">Choose File</a></li>

我尝试在onchange中添加.submit()，但它无效。

有人对此有所了解吗？

请在这里帮助我！

提前致谢。

修改

function getCmaFileInfo(obj,stype) {
        var fileObj, pathHeader , pathMiddle, pathEnd, allFilename, fileName, extName;
        var file;
        var img, reader;
         // file = upload.files[0];
        upload = document.getElementsByTagName('input')[0];
        holder = document.getElementById('dropzone');
        reader = new FileReader();
        file = upload.files[0];
        var iupload, holder;

        reader.onload = function (event) {
                img = new Image();
                //console.log(event.target.result);
                img.src = event.target.result;
                img.width = document.getElementById("dropzone").clientWidth;
                img.height= window.innerHeight;
                // note: no onload required since we've got the dataurl...I think! :)
                holder.innerHTML = '';
                holder.appendChild(img);
        };
        reader.readAsDataURL(file);
}

function getCmaFileView(obj,stype) {
        getCmaFileInfo(obj,stype);
}

Answer 1

您是否只是在getCmaFileView（）中添加一个功能/代码 - 哪个只提交表单？此外，它将在您的图像查看部分完成后调用，以便可以解决您的问题。

function getCmaFileView(obj,stype) {
        getCmaFileInfo(obj,stype);
        //form.submit() OR call_to_your_submit_function();
}

使用html中的单个按钮上传图像

1 个答案: