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>

Jquery的：

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

Answer 2

它的工作方式是有一个真正的文件选择按钮，但它是隐藏的。然后有一个链接，使其所有功能都与文件选择器链接，所以当点击链接时，单击文件选择器并显示你是浏览窗口。这可以用jquery和一些css

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

步骤1。 jquery文件您可以下载它或使用Jquery.com

中的api

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>

Answer 3

在这里重新发明轮子没有意义:)文件上传有一堆好的jquery（和纯js）库...

jQuery File Upload Basic Demo看起来它会做你想要的（并且看起来也很好）。另一个我听过很多好事：Dropzone JS。两者都支持单击一个简单的链接来启动文件浏览器，选择一个文件并开始上传过程等。

链接单击打开文件浏览器

3 个答案: