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

【问题标题】：Upload image with a single button in html使用 html 中的单个按钮上传图像
【发布时间】：2017-04-10 04:18:38
【问题描述】：

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

但是，我想把它变成一个按钮，不知道如何组合这两个按钮。我已经在google上搜索过，他们说我们可以使用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);
}

【问题讨论】：

标签： javascript html upload

【解决方案1】：

您不能在您的 getCmaFileView() 中再添加一个函数/代码 - 哪个只会提交表单？它也会在您的图像查看部分完成后调用，这样可以解决您的问题。

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

【讨论】：

嗯.. 感谢您的回答！那我应该把id输入"myForm"然后document.getElementById("myForm").submit();这样的形式吗？
我不确定表单的名称或 ID，但是可以按照您的方式尝试。
你写过表单提交的代码吗？请检查操作 URL 和代码，打印您的全局变量 - POST 和 FILES 以进行测试。
很高兴它起作用了......还有更多像这样的小查询......戳这里。
M 不确定...你想要这个...只需在标签内添加工具提示文本或图标，您就可以打开链接。