在链接上打开文件浏览器，单击

Question

我正在尝试复制Facebook上用于更改个人资料图片的照片上传脚本。 我希望用户单击链接，它会自动打开文件浏览器，然后当他们单击确定时，它将提交图像。

我想知道的是，如何在单击链接时触发文件浏览器，以及当他们单击确定时如何触发提交文件浏览器？

我已经有一个表格，但想使其更加简化。

当前脚本：

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

Answer 1

我用以下代码解决了这个问题。

链接： <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> <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;
});

Answer 2

它的工作方式是有一个真正的文件选择器按钮，但它是隐藏的。然后有一个链接，其所有功能都与文件选择器链接在一起，因此，当单击链接时，单击文件选择器并显示浏览器window.this可能与jQuery和一些CSS

以下代码可以帮助您，根据需要进行修改

第1步。 您可以下载jquery文件，也可以使用Jquery.com上的api

第二步代码

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

Answer 3

在这里重新发明轮子没有意义:)有很多不错的jquery（和纯js）库用于文件上传...

jQuery File Upload Basic Demo看起来像它想要的（看起来也不错）。 我听说过的另一个好消息是： Dropzone JS 。 两者都支持单击简单链接以启动文件浏览器，选择文件并开始上传过程等。

在链接上打开文件浏览器，单击

问题描述

3 个解决方案

解决方案1
0 已采纳 2014-02-10 21:11:36

解决方案2
0 2014-02-10 21:21:07

解决方案3
-1 2014-02-10 21:06:39

在链接上打开文件浏览器，单击

问题描述

3 个解决方案

解决方案1 0 已采纳 2014-02-10 21:11:36

解决方案2 0 2014-02-10 21:21:07

解决方案3 -1 2014-02-10 21:06:39

解决方案1
0 已采纳 2014-02-10 21:11:36

解决方案2
0 2014-02-10 21:21:07

解决方案3
-1 2014-02-10 21:06:39