如何在javascript中調用輸入文件標籤在safari瀏覽器中？

Question

我的JavaScript代碼：

$("#formimage").click(function(){ 
    $("#avatar").click(); 
}); 


<input type="file" name="avatar" id="avatar" style="display: none;" onchange="this.form.submit()" /> 

在這個

它不調用化身文件的標籤......甚至不給任何錯誤......在瀏覽器控制檯

Answer 1

很難觸發類型文件的輸入通過點擊其他的東西。你會遇到的最大問題是IE會將此視爲安全問題，並且可能不會讓你這樣做（如果輸入被隱藏）。爲了解決這個問題，你可以「淡化」圖像背後的輸入，這樣當用戶點擊圖像時，他們實際上是單擊文件輸入。

你的HTML可能看起來像這樣：

<div class="hiddenFileInputContainter"> 
    <img class="fileDownload" src="/images/ico_upload.png"> 
    <input type="file" name="fileUp" class="hidden" accept="image/*"> 
</div> 

然後，你將需要輸入的不透明度設置爲零，爲了讓後面的圖像是可見的，實際上並沒有從消除輸入頁：

input[type='file'].hidden 
{ 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    font-size: 50px; 
    cursor: pointer; 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: Alpha(Opacity=0); 
} 

您還需要來設置圖像的尺寸和容器：

img.fileDownload 
{ 
    height: 26px; 
    width: 26px; 
    padding: 0; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 4px 0 0; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

div.hiddenFileInputContainter 
{ 
    position: relative; 
    display: inline-block; 
    width: 27px; 
    height: 27px; 
    overflow: hidden; 
    vertical-align: middle; 
    cursor: pointer; 
} 

請注意，輸入的尺寸意味着溢出，因此無論您點擊容器的哪個位置，您都會在其中輸入內容。輸入意味着儘可能大，按鈕的實際尺寸設置在容器和圖像上。

一旦你已經成功地打開對話框，提交表單就只能是這樣的問題：

$("#fileUploadField").on("change", function() { 
    $("#formId").submit(); 
}); 

要不試試這個，使文件的輸入，看起來像按鈕：

http://blueimp.github.io/jQuery-File-Upload/