Open File Browser on Link Click

2019-09-07 13:37发布

站内问答 / PHP
1993 3 4

I'm trying to duplicate the photo upload script used on Facebook for changing your profile picture. I'm wanting for the user to click on a link and it automatically opens the file browser, and then when they click ok it submits the image.

What I'm wanting to know is how do you trigger the file browser on clicking a link, and how do you trigger to submit it when they press ok?

I already have a form, but want to make it more streamlined.

Current script:

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

3条回答
贪生不怕死
2楼-- · 2019-09-07 14:06

the way it works is that there is a real file selector button but it is hidden.then there is a link such that all its functions are linked with the file selector so when the link is clicked the file selector is clicked and displays you the browse window.this is possible with jquery and some css

the following code may help you,modify it according to your needs

step1. the jquery file You can either download it or use an api from Jquery.com

step2.the code

<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>
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-09-07 14:10

No point in re-inventing the wheel here :) There's a bunch of good jquery (and pure js) libs for file-upload...

jQuery File Upload Basic Demo looks like it will do what you want (and look good too). Another one I've heard a lot of good things about: Dropzone JS. Both support clicking a simple link to start the file-browser, select a file and start the upload process etc.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
4楼-- · 2019-09-07 14:17

I worked this out with the following code.

Link: <a href="#" id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a>

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;
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)