ajax 및 php로 이미지 업로드

Question

ajax를 사용하여 이미지를 업로드하고 싶습니다. 이 모듈은 : browse 이미지를 클릭 선택에

1. 이를 업로드 파일 필드를 통해 표시한다. 버튼을 제목과 설명, 그리고 클릭을 추가 한 후
2. 는, 그 이미지는 아래에 표시되고 상단 이미지 필드 당신은 AJAX를 통해 파일을 업로드 할 수 없습니다

Answer 1

비어 있습니다. IFRAME 또는 Flash 기반 업 로더로 작업해야합니다.

Answer 2

이미지를 업로드 할 때 JQuery 플러그인을 사용해보세요.

는

이 http://www.uploadify.com/ 그것을 수행하는 방법 아이디어를 줄 것이다 될 수 있습니다.

Answer 3

서버 측에서 처리한다고 가정하면 여기에 작은 함수와 자바 스크립트에서 'iframe 해킹'을 구현하는 방법에 대한 예제가 있습니다.

HTML

<form name="image-upload"> 
<input type="file" name="image" /></br> 
<button type="submit" name="upload">Upload</button> 
<div id="upload-results"></div> 
</form> 

자바 스크립트

var fileUpload = function(form /* HTMLElement */, action /* Form Action URL */, callback /* Callback function */) { 
    /* vars */ 
    var atribs = { 
     "target": "upload_iframe", 
     "action": action, 
     "method": "post", 
     "enctype": "multipart/form-data", 
     "encoding": "multipart/form-data" 
    }, iframe; 
    /* iframe listener */ 
    var ilistener = function() { 
     var results; 
     listener.remove(this, 'load', ilistener); 
     if('contentDocument' in this) { 
      results = this.contentDocument.body.innerHTML; 
     } else if ('contentWindow' in this) { 
      results = this.contentWindow.document.body.innerHTML; 
     } else if ('document' in this) { 
      results = this.document.body.innerHTML; 
     } else { 
      throw "i'm dead jim :/"; 
     } 
     callback.apply(this,[results]); // call the callback, passing the results 
     this.parentNode.removeChild(this); // remove the iframe 
    }; 

    /* create the iframe */ 
    form.parentNode.appendChild(FragBuilder([{"tagName": "iframe","id": "upload_iframe","name": "upload_iframe","style": {"height": "0","width": "0","border": "0"}}])); 
    /* collect the iframe back */ 
    iframe = By.id('upload_iframe'); 
    /* set the form properties */ 
    for(var attr in atribs) { 
     if(attr in form) { 
      form[attr] = atribs[attr]; 
     } 
    } 
    /* attach the event listener to the iframe */ 
    listener.add(iframe, 'load', ilistener); 
    /* submitting the form */ 
    form.submit(); 
}; 

// get the form, and the results area 
var form = document.forms['image-upload'], results = By.id('upload-results'); 
// listen for the form submit, capture it, and run the iframe upload. 
listener.add(form, 'submit', function(e) { 
    e.preventDefault(); 
    results.innerHTML = 'Uploading...'; 
    fileUpload(this, 'server.php' /* really anything */, function(data) { 
     console.log(data); 
      results.innerHTML = "Uploaded!"; 
    }); 
}); 

참고 : 단순 목적을 위해 나는 다음과 같은 유틸리티를 사용했다. https://github.com/rlemon/FragBuilder.js JSON 입력의 DocumentFragment 빌더입니다.
https://gist.github.com/2172100 이벤트 리스너 및 유틸리티 별 기능
*이 둘은 쉽게 제거됩니다.

Answer 4

사실 jQuery의 ajax 함수를 사용하여 이미지를 업로드 할 수 있습니다.

HTML :

<form action="/" enctype="multipart/form-data" method="post" accept-charset="utf-8"> 
    <input type="file" name="image"/> 
    <button type="submit"> 
</form> 

JS는 :

$("form").submit(function(){ 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
     url: window.location.pathname, 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
       alert(data); 
     } 
    }); 
    return false; 
}); 

이 스크립트는 Ajax를 통해 현재 페이지에 생성 된 파일 데이터를 POST 요청을 보낼 것입니다. url 매개 변수를 변경하여 대상을 분명히 변경할 수 있습니다.