링크에서 파일 브라우저 열기

프로필 사진을 변경하기 위해 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>

출처

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) 파일 업로드 libs와의 무리가있다 ...

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

링크에서 파일 브라우저 열기

답변

관련 문제