在鏈接上打開文件瀏覽器點擊

我正在嘗試複製Facebook上用於更改個人資料圖片的照片上傳腳本。我希望用戶點擊一個鏈接，它會自動打開文件瀏覽器，然後當他們點擊確定提交圖像。在鏈接上打開文件瀏覽器點擊

我想知道的是，如何在點擊鏈接時觸發文件瀏覽器，以及當他們按下OK時如何觸發並提交它？

我已經有了一個表格，但是想讓它更加簡化。

當前腳本：

<a href="#" data-reveal-id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a> 
<div id="changeImage" class="reveal-modal"> 
<form action="view.php" enctype="multipart/form-data" method="post" name="imgForm" id="imgForm"> 
    <input type="file" name="clientImage" id="clientImage" accept="image/*" /> 
    <input name="doEditImg" type="submit" id="doEditImg" value="Save" /> 
</form> 
</div>

來源

2014-02-10 dpDesignz

我用下面的代碼解決了這個問題。

鏈接：<a href="#" id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a>

形式：<form action="view.php" enctype="multipart/form-data" method="post" name="imgForm" id="imgForm"><input type="file" name="clientImage" id="clientImage" style="visibility:hidden;" accept="image/*" onchange="this.form.submit()" /></form>

的Jquery：

$('#changeImage').click(function(){ 
    $('#clientImage').trigger('click'); 
    return false; 
});

來源

2014-02-10 21:11:36 dpDesignz

-1

在沒有點這裏重新發明輪子:)有一羣很好的jQuery的（和純JS）庫的文件上傳...

jQuery File Upload Basic Demo外觀喜歡它會做你想做的事（而且看起來不錯）。另一個我聽說過很多好東西：Dropzone JS。兩者都支持點擊一個簡單的鏈接來啓動文件瀏覽器，選擇一個文件並開始上傳過程等。

來源

2014-02-10 21:06:39 Grynn

由於使用API！肯定會收藏這些，但不是我正在尋找的東西。 :) – dpDesignz

它的工作方式是，有一個真正的文件選擇器按鈕，但它是hidden.then存在聯繫使其所有功能都鏈接到文件選擇器，所以當點擊鏈接時，文件選擇器被點擊並顯示瀏覽窗口。這可能與jQuery和一些css

以下代碼可能會幫助到您，根據您的需求進行修改

step1。 jQuery的文件您可以下載或從Jquery.com

step2.the代碼

<html> 
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script> //use an api link to avoid keep on downloading the latest jquery version 

<script> 
//the script below will load the preview of the image in a div which has an id of image_preview 
if (window.FileReader) { 
    function handleFileSelect(evt) { 
    var files = evt.target.files; 
    var f = files[0]; 
    var reader = new FileReader(); 

     reader.onload = (function(theFile) { 
     return function(e) { 
      document.getElementById('image_preview').innerHTML = ['<img class="the_img_prev" src="', e.target.result,'" title="', theFile.name, '">'].join(''); 
     }; 
     })(f); 

     reader.readAsDataURL(f); 
    } 
} else { 
    alert('This browser does not support FileReader'); 
} 

//the script will make the link act like a file selector 
document.getElementById('files_selector').addEventListener('change', handleFileSelect, false); 
</script> 

<!-------------the form part----------------> 
<form id="image" action="upload.php" method="POST"> 
<input type="file" id="files_selector" name="image" style="display:none;"><!--the hidden selector--> 
<a href="#" class="image_selector" id="image_selector" onclick="document.getElementById('files_selector').click();" /><!--the link that acts as the selector --> 
</form> 

<div id="image_preview"><!-----the selected image will be previewed in this div---></div> 
</html>

來源

2014-02-10 21:21:07

在鏈接上打開文件瀏覽器點擊

回答

相關問題