用html中的單個按鈕上傳圖像

我是一個html/javascript中的新手，並且製作了兩個可以上傳圖片的按鈕（選擇文件按鈕和上傳按鈕）。用html中的單個按鈕上傳圖像

但是，我想讓它只是一個按鈕，不知道如何組合這兩個按鈕。我已經在google上搜索過，他們說我們可以使用onchange結合提交按鈕，但我已經有onchange功能，可以在選擇圖像文件後將圖像顯示給iframe。

這裏是<form>

<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>

而且我的HTML代碼，這裏是我的腳本和按鈕

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

我試圖用平變化添加.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); 
}

來源

2017-04-10 paulc1111

你就不能添加更多的功能/代碼在getCmaFileView（） - 這將只是提交表單？它也會在您的圖像查看部分完成後調用，以便解決您的問題。

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

來源

2017-04-10 05:17:08 Hmmm

hm ..謝謝你的回答！然後，我應該把id放在''myForm''然後'document.getElementById（「myForm」）。submit（）;'？ – paulc1111

我不確定表單的名稱或ID，但是按自己的方式嘗試。 – Hmmm

嗯...它不工作...我不知道爲什麼..提交後它再次顯示上一張圖片... – paulc1111

用html中的單個按鈕上傳圖像

回答

相關問題