페이지를 다시로드하지 않고 submit을 사용하여 파일을 업로드하는 방법

Question

제출 버튼을 사용하여 Tomcat 서버에 파일을 업로드하고 있지만 문제는 페이지가 다시로드된다는 것입니다. return false을 사용하면 파일이 업로드되지 않습니다. 파일을 업로드하지 않고 버튼을 사용하려고했습니다.

저는 클라이언트 측에 jstl과 javascript를 사용하고 있습니다. 내 자바 스크립트를

<form:form modelAttribute="uploadItem" name="frm" method="post" 
    enctype="multipart/form-data"> 
    <fieldset> 
     <legend>Upload File</legend> 
     <table> 
      <tr> 
       <td><form:label for="fileData" path="fileData">File</form:label><br /> 
       </td> 
       <td><form:input path="fileData" id="csv" type="file" /></td> 
      </tr> 
      <tr> 
       <td><br /></td> 
       <td><input id="subUpload" type="submit" value="Upload" /></td> 
      </tr> 
     </table> 
    </fieldset> 
</form:form> 

는 :

$("#subUpload").click(function(e) { 
    var image = document.getElementById("csv").value; 
    if(image!=''){ 
     var checkimg = image.toLowerCase(); 
      if (!checkimg.match(/(\.CSV|\.csv)$/)){ 
       alert("Please enter Image File Extensions .jpg,.png,.jpeg"); 
       document.getElementById("image").focus(); 
       return false; 
      } 
    } 
    return true; 
    e.preventDefault(); 
}); 

또한 여전히 e.preventDefault()하지만 재로드를 사용했다.

도와주세요.

Answer 1

iframe을 사용하면 가능합니다. 아래와 return [optional value here];와 같은 블록에

Answer 2

• 뭐든지 그래서 당신의 e.preventDefault() 라인이 실행되지 얻을 않을 것이다 생략한다.
• return true 정상 작동 버튼을 말할 것이다, 그래서
• return false 및 e.preventDefault() 같은 일을 제외하고, (파일을 제출에서 양식을 중지를) 할 것, return false 추가로 블록을 클릭 버블 링 정규 작업을 수행하려고합니다 사건을 문서 위로 올려라.

파일을 원활하게 보내려는 경우 해당 데이터 전송을 처리하도록 양식을 보내는 대신 iframe을 사용하거나 jQuery를 사용하여 데이터를 보낼 수 있습니다.

Answer 3

당신은 전 양식 양식을 만들

Answer 4

제출하기 전에 파일을 업로드 할 수 있습니다 uploadify 유형의 구성 요소 ..

<form name="form" method="post" enctype="multipart/form-data" action="test.php"> 
<input type="file" name="piture" value="" onChange="window.document.forms['form'].submit();"/> </form> 

test.php 대신`의

if(preg_match('/[.](jpg)|(gif)|(png)$/', $_FILES['picture']['name'])) { 
    $rand=rand(000000000,9999999); 
    $fl_name = $_FILES['picture']['name']; 
    $expld = explode('.', $fl_name); 
    $extnnew = $expld[1]; 
    $filename = $rand.'.'.$extnnew; 
    $source = $_FILES['picture']['tmp_name']; 
    $path_to_image_directory = "uploads/"; 
    if(!is_dir($path_to_image_directory)){ 
mkdir($path_to_image_directory, 0777); 
chmod($path_to_image_directory, 0777);} 

    $target = $path_to_image_directory . $filename; 
    move_uploaded_file($source, $target); 
    $sql ="insert into picture values('','".$filename."','Now()')"; 
    mysql_query($sql) or die(mysql_error()); 

         } 
header('Location:page.php');