iframe를 사용하여 그림 업로드 미리보기 효과 구현

원리: 그림이 업로드된 페이지를 iframe에 놓으면 iframe에서 그림을 서버에 제출할 수 있고 페이지를 새로 고칠 필요가 없다. 제출이 성공하면 스크립트로 홈페이지에 업로드된 그림을 표시할 수 있다.
Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function doUpload() {
            var theFrame = document.getElementById("uploadframe");
            if (theFrame) {
                theFrame = theFrame.contentWindow;
                theFrame.selectAndUpload();
            }
        }

        function callback(str) {
            var theImg = document.getElementById("imgResult");
            theImg.setAttribute("src", str);
        }  
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>  
            Asp.net  </h1>  
        <iframe src="PicUpload.aspx" id="uploadframe" style="display: none;"></iframe>  
        <p>  
            <input type="button" id="btnBrowser" value=" " onclick="doUpload()" />  
        </p>  
        <h2>  
             </h2>  
        <p>  
            <img alt=" " id="imgResult" style="width: 400px" />  
        </p>  
    </div>
    </form>
</body>
</html>

PicUpload.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PicUpload.aspx.cs" Inherits="PicUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function selectAndUpload() {
            var theFileUpload = document.getElementById("<%=fileUpload1.ClientID%>");
            theFileUpload.onchange = function () {
                var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf("."));
                if (!fileExt.match(/\.jpg|\.png|\.gif/i))//   
                {
                    top.alert(" jpg,png,gif 。");
                }
                else {
                    var myForm = document.getElementById("<%=form1.ClientID%>");
                    myForm.submit();
                }
            }
            theFileUpload.click();
        }

        function callback(filePath) {
            top.callback(filePath);
        }  
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload runat="server" ID="fileUpload1"></asp:FileUpload>  
    </div>
    </form>
</body>
</html>

PicUpload.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PicUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && fileUpload1.HasFile)
        {
            string path = Server.MapPath("~/upload/" + fileUpload1.FileName);
            fileUpload1.SaveAs(path);
            ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", "callback('upload/" + fileUpload1.FileName + "')", true);
        }
    }
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.

iframe를 사용하여 그림 업로드 미리보기 효과 구현

좋은 웹페이지 즐겨찾기