dhl: 페이지 새로 고침 없 음 ajax 업로드 파일 -- 아 날로 그 iframe, 아주 간단 합 니 다.
9241 단어 iframe
나중에 인터넷 의 일부 해결 방안 을 보 았 는데 기 존의 aax 가 파일 을 업로드 하 는 봉인 방법 도 플래시 를 이용 한 것 이 있 었 다.플래시 는 좋 은 방법 이지 만 누구나 플래시 를 할 수 있 는 것 이 아니 라 기 존 방법 을 다운로드 해서 수정 하 는 것 도 쉽 지 않 고 파일 이 상대 적 으로 크다.
결국 iframe 을 모 의 해서 이 루어 질 수 밖 에 없 었 다.발견 은 상당히 간단 하 다.
위 는 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("");
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
puppeteer로 iframe의 요소를 조작합니다.iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다. app/index.html app/iframe.html puppeteer의 코드를 작성합니다. app/script.js...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.