간단한 jQuery 파일 업로드 플러그인 (iframe 만 사용)

Question

페이지를 새로 고치지 않고도 파일을 업로드 할 수있게 해주는 아주 간단하고 기본적인 jQuery 플러그인을 찾기 위해 웹을 검색하는 데 많은 시간을 할애했지만 이러한 큰 플러그인을 원하지 않았습니다. 모든 멋진 기술을 사용했고, 내 웹 사이트에 쉽게 추가되기를 원했습니다. 그래서 저는 방금 저만의 jQuery 플러그인을 만들었습니다. 다른 누군가가 그것을 찾고 있다면 당신과 공유하기로했습니다. 이제 jQuery 플러그인을 만드는 전문가가 아니므로 개선 할 부분이 있다면 알려 주시기 바랍니다.

그래서 여기있다 :

이 당신이 그것을 사용하도록 설정할 수 있습니다 HTML 양식입니다 :

<form enctype="multipart/form-data" class="fileUpload"> 
    <input type="file" name="uploadFile" /> 
</form> 

이 플러그인을 호출하는 방법입니다

$("body").on("change", ".fileUpload", function(){ 

    $(this).fileUpload({ 
     form: $(this), //selector of the form 
     actionURL: "uploadPhoto.php", //directory to handle upload 
     success: function(html){ 
      //on successful upload, in this case if there is any html returned 
      $("body").prepend(html); 

     }, 
     error: function(){   

     } 
    }); 
}); 

이것은 플러그인 자체입니다 :

(function($){ 
    $.fn.extend({ 

     fileUpload: function(options) { 

      var defaults = { 
       form: null, 
       actionURL: null, 
       success: function(){}, 
       error: function(){}, 
      }; 

      var options = $.extend(defaults, options); 

      return this.each(function() { 

       $('<iframe />', { 
       id: 'upload_iframe', 
       name: 'upload_iframe', 
       style: 'width:0; height:0; border:none;' 
       }).appendTo('body');  

       var form = $(options.form); 
       form.attr("action", options.actionURL); 
       form.attr("method", "post"); 
       form.attr("enctype", "multipart/form-data"); 
       form.attr("encoding", "multipart/form-data"); 
       form.attr("target", "upload_iframe"); 
       form.submit(); 


       $("#upload_iframe").load(function() { 
        html = $("#upload_iframe")[0].contentWindow.document.body.innerHTML; 

        html!='' ? options.success.call(this, html) : options.error.call(this); 

        $("iframe#upload_iframe").remove(); 

       }); 


      }); 
     } 
    }); 
})(jQuery); 

uploadPhoto.php :

foreach($_FILES as $file) 
{ 

    foreach ($file['uploadFile'] as $name) 
    { 

    $fileArr = explode("." , $name); 
    $ext = strtolower($fileArr[count($fileArr)-1]); 
    $allowed = array("jpg", "jpeg", "png", "gif", "bmp"); 

     if(in_array($ext, $allowed)) 
     { 
      $source = $file['tmp_name'][$i++]; 
      $path = "images/"; 
      $filename = uniqid(); 

      if (move_uploaded_file($source, $path.$filename.$ext)) 
      { 
      //Do whatever on success of file upload 
      } 
     }  
    } 
} 

Answer 1

당신은 좋은 업 로더를 사용할 수 있습니다. 프로덕션 응용 프로그램에서 사용하고 매우 잘 작동합니다. 우리는 심지어 그것을 S3에 직접 업로드했습니다. 당신은 여전히 ​​당신과 함께있는 경우

http://fineuploader.com/