iframe을 사용하여 Asynchronous(AJAX) 파일을 업로드하는 방법

iframe을 사용하여 Asynchronous(AJAX) 파일을 업로드하는 방법

저는 ajax 파일을 업로드 하려고 합니다.저는 그것을 사용하지 않고서는 불가능하다고 읽었습니다.iframe.
나는 다음과 같이 썼다.

<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>
<form id="myForm" action="file-component" method="post" enctype="multipart/form-data"  target="uploadTrg">
File: <input type="file" name="file">
<input type="submit" value="Submit" id="submitBtn"/>
</form>

및 jquery 형식 플러그인을 사용합니다.

$('#myForm').ajaxForm({
    dataType:  'json',
    success:   function(data){
        alert(data.toSource());
    }
});

결과:

파일이 정상적으로 업로드되어 업로드된 파일이 표시되지만 대화상자가 나타납니다.

파일 이름 + 크기 등을 표시하기 위해 json 결과를 반송하기 때문입니다.

질문 : iFrame을 사용하여 "ajax file upload"를 작성하려면 어떻게 해야 합니까?

주의:

1. 더 적절하고 쉬운 솔루션이 있다면 특별한 플러그인을 사용하여 파일을 업로드하는 것을 선호하지 않습니다.
2. 서버측 언어로서 jsp/servlet을 사용하고 있습니다만, 어느 언어를 사용하는지는 의미가 없다고 생각합니다.

감사해요.

나는 내 질문에 대답할 것이다, 나는 해결책을 찾았다고 생각한다.목표를 달성하기 위해 제가 수행한 단계는 다음과 같습니다.

1. 폼의 속성 "target"을 "iframe"으로 지정합니다.
2. 일반 HTML 요청(Asynchronous/Ajax 요청 아님)을 사용하여 폼을 전송합니다.
3. 타겟 프레임은 iframe이므로 페이지 전체가 새로 고쳐지는 것이 아니라 iframe만 새로 고쳐집니다.
4. iframe onload 이벤트가 발생하면(Javascript를 사용하여 해당 이벤트를 캡처) 원하는 작업을 수행합니다. 예를 들어 최근에 업로드한 파일 정보를 나열하는 요청을 다시 보낼 수 있습니다.

최종 코드는 다음과 같습니다.

    <!-- Attach a file -->

    <iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>

    <form id="myForm" action="http://example.com/file-upload-service" method="post" enctype="multipart/form-data"  target="uploadTrg">

        File: <input type="file" name="file">
        <input type="submit" value="Submit" id="submitBtn"/>

    </form>

    <div id="ajaxResultTest"></div>

javascript:

$("iframe").load(function(){
    // ok , now you know that the file is uploaded , you can do what you want , for example tell the user that the file is uploaded 
    alert("The file is uploaded");

    // or you can has your own technique to display the uploaded file name + id ? 
    $.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){

       // add the last uploaded file , so the user can see the uploaded files
       $("#ajaxResultTest").append("<h4>" + attachment.name + ":" + attachment.id "</h4>");

    },'json');
});

이 예는 BugKiller에서 가져온 것입니다.로고를 업로드하여 html 페이지에 바로 표시할 수 있으며 업로드 값이 클리어 됩니다.

html:

<form id="uploadForm" method="post" enctype="multipart/form-data"  target="uploadTrg">
  <div id="fileUploadWrapper"><input type="file" name="file" id="fileUpload"></div>
  <input type="submit" value="Upload" id="submitBtn"/>
</form>
<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="no" style="display:none"></iframe>
<img id="imgLogo" style="border-width:0px;" />

javascript:

$(document).ready(function () {
  var companynumber = '12345'; //get this from the database
  var logoUploadUrl = 'UploadHandler.aspx?logoupload=true&companynumber=' + companynumber ;
  $("#uploadForm").attr("action", logoUploadUrl);

  $("#uploadTrg").load(function () {
    //upload complete

    //only way to reset contents of file upload control is to recreate it
    $("#fileUploadWrapper").html('<input type="file" name="file" id="fileUpload">');

    //reload the logo url, add ticks on the end so browser reloads it
    var ticks = ((new Date().getTime() * 10000) + 621355968000000000);
    var logoUrl = 'images/clients/' + companynumber + '/client.gif?' + ticks;
    $("#imgLogo").attr('src', logoUrl);
  });
});

뒤에 있는 업로드 핸들러 코드(C#):

namespace MyWebApp {
    public partial class UploadHandler : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {
          if (Request.Params["logoupload"] != null) {
            string companynumber = Request.Params["companynumber"];
            string savePath = Server.MapPath("\\images") + "\\clients\\" + companynumber + "\\client.gif";
            if (File.Exists(savePath))
                File.Delete(savePath);
            //save the file to the server 
            Request.Files[0].SaveAs(savePath);

            Response.Write("OK");
            Response.Flush();
            Response.End();
          }
       }
}

언급URL : https://stackoverflow.com/questions/2909442/how-to-make-asynchronousajax-file-upload-using-iframe