替換文件上傳（瀏覽和提交）只是一個按鈕

Question

這裏的形式是什麼樣子的測試目的：

http://screencast.com/t/sp6WiM0H

下一步我要帶，就是刪除默認瀏覽/提交文件上傳按鈕，並通過一個按鈕（上面鏈接中的藍色「添加圖片」按鈕）完成所有操作。

• 用戶點擊「添加照片」。
• 用戶可以瀏覽照片。
• 當用戶選擇了一張照片，自動'提交'它。

你會怎麼做呢？

我想JS可能是必需的，所以我標記了它。

謝謝

編輯：

的形式如下：

<form action="upload_image.php" method="post" enctype="multipart/form-data"> 
    <div class="edit"> 
     <a href="" class="add blue_bg" onclick="performClick(document.getElementById('theFile'));">Add <br/> Pictures</a> 
    </div> 
    <input style="display:none;" type="file" id="theFile" name="photo" /> 
    <input type="hidden" name="owner_id" value="<?php echo $profileData[0]['id'] ?>"> 
</form> 

它可以瀏覽，但沒有被提交的形式看來。

JS的樣子：

function performClick(node) { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initEvent("click", true, false); 
    node.dispatchEvent(evt); 
} 

編輯：現在知道了，我說這個JS來處理表單提交：

$("input[type='file']").on("change", function(){ 
    $("#photoForm").submit(); 
}); 

還增加name="photo"到INPUT TYPE =文件。

Answer 1

您可以使用以下代碼來達到此目的。

<script type="text/javascript"> 
function performClick(node) { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initEvent("click", true, false); 
    node.dispatchEvent(evt); 
} 
</script> 
<a href="#" onclick="performClick(document.getElementById('theFile'));">Open file dialog</a> 
<input type="file" id="theFile" /> 

請注意，您不能僅僅使用.click（），因爲某些瀏覽器不支持它。