dhl: 페이지 새로 고침 없 음 ajax 업로드 파일 -- 아 날로 그 iframe, 아주 간단 합 니 다.

9241 단어 iframe
얼마 전에 ajax 가 파일 을 올 리 는 것 을 해결 할 때 한바탕 고생 했 습 니 다.$. post 로 텍스트 정 보 를 직접 올 리 는 것 은 문제 가 없 을 것 입 니 다.하지만 $. post 가 직접 사진 을 올 리 는 것 은 불가능 하 다.
나중에 인터넷 의 일부 해결 방안 을 보 았 는데 기 존의 aax 가 파일 을 업로드 하 는 봉인 방법 도 플래시 를 이용 한 것 이 있 었 다.플래시 는 좋 은 방법 이지 만 누구나 플래시 를 할 수 있 는 것 이 아니 라 기 존 방법 을 다운로드 해서 수정 하 는 것 도 쉽 지 않 고 파일 이 상대 적 으로 크다.
결국 iframe 을 모 의 해서 이 루어 질 수 밖 에 없 었 다.발견 은 상당히 간단 하 다.

    여기 가 포인트 야.파일 enctype 을 업로드 하려 면 이 속성 이 적지 않 습 니 다. target 의 값 은 iframe 의 name 값 으로 바 꿉 니 다.

  
       
    
첨부 파일: < / td >
      
 

 
위 는 HTML.
다음은 js 코드 를 쓰 겠 습 니 다. 저 는 jQuery 를 사용 하기 때문에 사용 할 때 jquery 라 이브 러 리 를 불 러 오 는 것 이 필요 합 니 다.
 $(function(){
        if($.browser.msie){
             window.form1.submit();}else{
             $("#form1").submit();}
       });
 //IE 는 규범 에 맞지 않 는 브 라 우 저, 특히 IE6 이기 때문에 브 라 우 저 버 전의 판단 을 내 렸 습 니 다. IE6 는 $("\ # idName"). submit () 를 직접 지원 하지 않 습 니 다. 이러한 방식 입 니 다.
그리고 서버 에서 어떻게 해 야 합 니까? 그리고 값 을 되 돌려 야 합 니 다. 직접 submit 는 값 을 되 돌려 줄 수 없습니다.
public void Upload()
{
    HttpPosted Base ff = Request. Files ["document"]; / / 올 린 파일 을 가 져 오 는 흐름 이 며, 여러 파일 이 라면 색인 값 으로 표시 할 수도 있 습 니 다.
   string fileName=System.DateTime.Now+ff.FileName.ToString();   //여기 서 꺼 낸 파일 이름 은 접미사 가 없 기 때문에 저장 하려 면 파일 확장자 도 꺼 내야 합 니 다. 여 기 는 자세히 쓰 지 않 고 이러한 생각 을 설명 하기 위해 서 입 니 다.
    try{
          SaveAs(documentPath+fileName+extendtionName); 
           Response. Write ("< script type = 'text / javascript' type = 'language' > parent. window. callBackMethod ('업로드 성공'); < / scrpt >");
       } 
     catch
     {
       Response. Write ("< script type = 'text / javascript' type = 'language' > parent. window. callBackMethod ('업로드 실패'); < / scrpt >"); //parent.window.methodName(); 이것 은 JS 에서 부모 페이지 를 호출 하 는 방법 입 니 다. 현재 iframe 에서 파일 을 업로드 하 는 것 을 모 의 하기 때 문 입 니 다. 이 iframe 의 역할 은 중간 역 의 역할 입 니 다. 부모 페이지 에서 업 로드 를 클릭 한 후 target 을 통 해 페이지 문 서 를 iframe 에 전송 한 다음 서버 에 업로드 합 니 다. 서버 에서 응답 이 있 으 면 iframe 에 표시 합 니 다. 부모 페이지 에 직접 결 과 를 표시 하 는 것 이 아 닙 니 다.이 알림 은 alert () 에서 대화 상 자 를 꺼 내 서 알려 줄 수 있 습 니 다. 그렇다면 부모 페이지 를 바 꾸 지 않 는 방법 도 좋 습 니 다. 이 알림 의 내용 을 다양 하 게 하려 면 인망 과 같은 파란색 대화 상 자 를 팝 업 하 는 것 과 같 습 니 다.
     } 

 아 날로 그 iframe 은 페이지 부분 업데이트 이지 만 페이지 의 이 iframe 은 내용 이 없고 표시 되 지 않 기 때문에 전체 페이지 에 영향 을 주지 않 습 니 다.
Request. Files 방법 을 생각 하려 면 ActiveX, Flash, Siverlight 플러그 인 을 기반 으로 한 업로드 구성 요 소 를 찾 아야 합 니 다. 순수한 javascript 은 할 수 없습니다.
 
내 코드:
 
 
<%@ WebHandler Language="C#" Class="UpClientPackage" %>



using System;

using System.IO;

using Lsense.Cn;

using System.Web;



public class UpClientPackage : IHttpHandler

{

    public readonly string UploadPackagePath = "/upload/Package/";

    

    public void ProcessRequest (HttpContext context) {

        //context.Response.ContentType = "text/plain";        

        //context.Response.Write(UpFile(UploadPackagePath, context.Request["callBack"]));

        context.Response.Write("<script type='text/javascript' type='language'>alert('test:ok');</script>");

        //string rc =Lsense.Cn.Commons.UpFileHelper.UpFile("upsdk", context.Request["callBack"]);

        //context.Response.Write(rc);

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

    /// <summary>

    ///       

    /// </summary>

    /// <param name="re"></param>

    /// <returns></returns>

    public bool CheckFileExt(string  re)

    {

        string fileType = re.Substring(re.LastIndexOf('.') + 1).ToLower();

        if (Lsense.Cn.Commons.Config.ValidUpLoadFileType.Contains(fileType))

        {

            return true;

        }

        return false;

    }



    /// <summary>

    ///   

    /// </summary>

    /// <param name="toFilePath"></param>

    /// <param name="callBackJsFunction"></param>

    /// <returns></returns>

    public string UpFile(string toFilePath, string callBackJsFunction)

    {

        HttpPostedFile postedFile = HttpContext.Current.Request.Files["upsdk"];

        string fileFullName = postedFile.FileName;

        string fileEx = fileFullName.Substring(fileFullName.LastIndexOf('.'));



        try

        {

            if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

            //      

            string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);

            //        

            if (!Directory.Exists(toFileFullPath))

            {

                Directory.CreateDirectory(toFileFullPath);

            }

            if (!CheckFileExt(fileEx))

            {

                return

                    "<script type='text/javascript' type='language'>parent.window." + callBackJsFunction + "('    :       !||');</script>";

            }

            if (postedFile.ContentLength > 102400000)

            {

                return

                    "<script type='text/javascript' type='language'>parent.window." + callBackJsFunction + "('    :         10M||');</script>";

            }



            string fileName = DateTime.Now.Ticks + fileEx;

            //          

            string toFile = toFileFullPath + fileName;

            postedFile.SaveAs(toFile);

            string packName;

            string packDownUrl = Lsense.Cn.Commons.WebUtil.GetVirtualPathUrl() + this.UploadPackagePath + fileName;

            bool b = Lsense.Cn.Commons.WebUtil.GetApkPackName(fileName, out packName);

            string re = b ? "     :" + packName : "         ,          !";

            return "<script type='text/javascript' type='language'>parent.window." + callBackJsFunction + "('      !" + re + "|" + packDownUrl + "|" + packName + "');</script>";

        }

        catch

        {

            return "<script type='text/javascript' type='language'>parent.window." + callBackJsFunction + "('    !   。||');</script>";  

        } 

    }



}


  Html:
 
 <tr id="ad_upsdk" style=" display:none">

        <td></td>

        <td  id="uptxt">     :</td>

        <td colspan="4">

        <iframe name="ajaxUpload" style="display:none"></iframe>

        <form name="upsdkfrom" id="upsdkfrom" method="post" action="/ajax/UpClientPackage.ashx?callBack=upsdkfilldata"  enctype="multipart/form-data" target="ajaxUpload">

        <input type="file" name="upsdk" id="upsdk" onchange="" />

        <input type="button" id="" name="" value="       " onclick="javascript:ajaxSdkUpload('upsdkfrom','loading_msg','divmsg');" />

        </form>

        <span  id="loading_msg"></span>

        <span class="text02" id="divmsg"></span>

        <input type="text" id="fileName" name="fileName" style=" display:none"  class="input02" value="" />

        <input type="hidden" id="packName" name="packName" value="" />

        </td>

    </tr>


  Js;
//dhl add upsdk

 function test(data) {

     alert(data);

 }

function ajaxSdkUpload(obfile_id,obj_loading,obj_msg) {

    //      

    $("#loading_msg" + obj_loading).html("<img src=/site/images/ajax.gif />       ...");

    $("#divmsg" + obj_msg).html("");

    var o = $("#" + obfile_id);

    o.submit();

}



function upsdkfilldata(data) {

    alert(data);

    var stringArray = data.split("|");

    $("#divmsg").html(stringArray[0]);

    $("#fileName").val(stringArray[1]);

    $("#packName").val(stringArray[2]);

    $("#loading_msg").html("");

}



function upkjfilldata(data) {

    var stringArray = data.split("|");

    $("#upkjmsg").html(stringArray[0]);

    $("#ex_control").val(""+stringArray[1]);

    $("#actionpackname").val(stringArray[2]);

    $("#upkjloading").html("");

}


좋은 웹페이지 즐겨찾기