輸入類型=「文件」javascript點擊模擬

我想知道爲什麼this例子在Chrome 10中運行，但在Fx 3.6中不起作用？ IFAIK，正好輸入類型=「文件」點擊不起作用...輸入類型=「文件」javascript點擊模擬

任何人都可以解釋，爲什麼？

2011-03-13 Alex Ivasyuv

OK，我發現它可以從https://developer.mozilla.org/en/Using_files_from_web_applications Fx的4 ，但爲什麼？有沒有什麼特殊的技術？ – 2011-03-13 09:00:32

他們只是在版本4中添加了「自動點擊」輸入類型文件的功能，該示例中的所有其他內容已經在版本3.6中提供。爲什麼？猜猜這對開發者來說是個問題，懷疑你會在這裏找到它們。:) – 2011-03-13 09:26:52

請參閱以下兩個問題：http://stackoverflow.com/questions/2769001/input-type-file-auto-click和http://stackoverflow.com/questions/1829774/jquery-simulating-a-點擊一個輸入類型文件沒有工作在Firefox中 – 2011-03-13 09:29:49

嘿亞歷克斯Ivasyuv，

閱讀您的問題，並拍了一下你所指出的頁面。

您是否已將該按鈕的點擊事件指向右側的點擊事件？因爲我認爲到處都不可能。文件輸入類型處理彈出窗口並上傳自己..

似乎你不能通過調用click（）事件觸發彈出文件上傳窗口。至少在Firefox，Opera，Chrome等瀏覽器中是不可能的。但是在IE瀏覽器中有可能嗎？（無論如何，IE始終表現得很奇怪。）

我發現了一些可能有助於弄清楚的文章。檢查它們。你會解決問題......！

01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e

02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

問候，再生不良

來源

2011-03-13 11:50:20

我最近在谷歌搜索這一點，並決定拿出自己的解決方案。

對於那些尋找一個解決方案，請參閱我的回購 - Fancy Upload jQuery Plugin

這是jQuery的一個小插件，但歡迎你剪掉它，或者用它作爲你的代碼基礎 - 不管！它只是設置你的標準上傳按鈕，併爲你提供更多的定製空間。

這個插件的代碼可以在下面看到。可以使用$（'INPUT [type = file]'）在任何文件上傳元素上調用它。fancyUpload（）;

$.fn.fancyUpload = function(data) { 

    // generate unique ID for upload box and determine default text to use 
    var uploadBox = $(this); 
    var uniqID = Math.floor(Math.random() * 999999); 
    var defText = (data == "" || data == undefined || data.defaultText == "" || data.defaultText == undefined) ? 'Click here to add an Attachment' : data.defaultText; 

    // hide the original upload box and replace with fancyUpload 
    uploadBox.hide(); 
    uploadBox.before('<input class="fancyUpload" type="text" value="' + defText + '" id="uploadID'+uniqID+'" />').wrap('<div />'); 

    var newUploadBox = $('INPUT[type=text]#uploadID'+uniqID); 

    // handle clicks on new upload box 
    newUploadBox.click(function (e) { 
     var _this = $(this); 

     // blur the text box because we dont want to focus on it and emulate click on file upload 
     _this.blur().siblings('div:first').children('INPUT[type=file]').click().bind('change', function (e) { 
      // determine resulting file name by getting last element in full file path 
      var filename = $(this).val().split("\\"); 
      filename = filename[filename.length-1]; 

      // set file name on emulated text box 
      _this.attr({ 'value' : (filename == "" || filename == undefined) ? defText : 'Attachment: ' + filename }).addClass('fileOn'); 

      // handle form field resets (reset to defText) 
      _this.parents('FORM:first').find('INPUT[type=reset]').click(function() { 
       _this.attr({ 'value' : defText }).removeClass('fileOn'); 
      }); 
     }); 
    }); 
};

來源

2013-06-24 10:09:08 Chris

想知道投票的原因...這是一個有用的資源給別人。 – Chris 2013-06-24 12:51:04

你的答案不過是一個鏈接。鏈接唯一的答案不是這個網站的有用資源，特別是當鏈接在未來的某個時間點中斷時。 – 2013-06-24 12:59:48

@RayNicholus我希望這現在對你更有價值。鏈接指向解決OP問題的插件的源代碼。因此在我看來是有用的。 – Chris 2013-06-24 13:03:15

在Android上（出於安全原因），最初接收用戶點擊的點擊處理程序必須是發送點擊到文件輸入元素的相同邏輯。因此，文件輸入元素可以隱藏（例如，如果您想從菜單選擇中觸發上傳）。例如，下面的代碼（包含在）：

jQuery(function($) { 
    $('#capture').on('click', function(e) { 
    $('#file')[0].click(); 
    }); 
});

來源

2017-01-14 22:54:02

<label><input type="file" name="fuckedfile" id="fuckedfile" style="display:none"> 
 
CLICK!</label><br/>

來源

2017-02-19 20:08:15 SynCap

輸入類型=「文件」javascript點擊模擬

回答

相關問題