html5使用FileReader上傳圖片


客戶端代碼是網上找的,修改為.net代碼。

<html>
<head>
    <meta charset="utf-8">
    <title>使用html5 FileReader獲取圖片,並異步上傳到服務器(not iframe)</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            background: #f2f2f0;
        }
        p
        {
            margin: 0px;
        }
        .title
        {
            color: #FFFF00;
            background: #000000;
            text-align: center;
            font-size: 24px;
            line-height: 50px;
            font-weight: bold;
        }
        .file
        {
            position: absolute;
            width: 100%;
            font-size: 90px;
            display: none;
        }
        .filebtn
        {
            display: block;
            position: relative;
            height: 110px;
            color: #FFFFFF;
            background: #06980e;
            font-size: 48px;
            line-height: 110px;
            text-align: center;
            cursor: pointer;
            border: 3px solid #cccccc;
        }
        .filebtn:hover
        {
            background: #04bc0d;
        }
        .showimg
        {
            margin: 10px auto 10px auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 選擇圖片  
            document.getElementById('img').onchange = function () {

                var input = document.getElementById("img");
                var img = input.files[0];
                // 判斷是否圖片  
                if (!img) {
                    return;
                }

                // 判斷圖片格式  
                if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
                    alert('圖片只能是jpg,gif,png');
                    return;
                }

                var reader = new FileReader();
                reader.readAsDataURL(img);

                reader.onload = function (e) { // reader onload start  
                    // ajax 上傳圖片  
                    $.post("Handler.ashx", { imgname: img.name, img: e.target.result }, function (ret) {

                        var www = ret;
                        if (ret != '') {
                            alert('upload success');
                            $('#showimg').html('<img src="' + ret + '">');
                        } else {
                            alert('upload fail');
                        }
                    }, 'text'); //這里返回的類型有:json,html,xml,text
                } // reader onload end  
            }

        }  
    </script>
</head>
<body>
    <p class="title">
        使用html5 FileReader獲取圖片,並異步上傳到服務器(not iframe)</p>
    <p>
        <input type="file" class="file" id="img"><%--加入multiple可多選--%><label class="filebtn"
            for="img" title="JPG,GIF,PNG">請選擇圖片</label></p>
    <p class="showimg" id="showimg">
    </p>
</body>
</html>

 

服務端代碼:

 

    public void ProcessRequest(HttpContext context)
    {
        if (context.Request["img"] != null)//生成校驗碼
        {
            string imgname = context.Request["imgname"];
            string imgExtention = System.IO.Path.GetExtension(imgname).ToLower();
            if (imgExtention != ".jpg" && imgExtention != ".jpe" && imgExtention != ".jpeg" && imgExtention != ".gif" && imgExtention != ".png" && imgExtention != ".bmp")
            {
                string s = "原圖片文件格式不正確,支持的格式有[ .jpg|.jpe|.jpeg|.png|.bmp|.gif ]!";
                
            }
            string imgData = context.Request["img"];
            string[] ss =imgData.Split(',');
            byte[] imageBytes = Convert.FromBase64String(ss[1]);
            //讀入MemoryStream對象
            System.IO.MemoryStream memoryStream = new System.IO.MemoryStream(imageBytes, 0, imageBytes.Length);
            memoryStream.Write(imageBytes, 0, imageBytes.Length);
            //轉成圖片
            System.Drawing.Image image = System.Drawing.Image.FromStream(memoryStream);
            image.Save("硬盤存儲地址" + imgname);
            context.Response.Write("Web服務器地址" + imgname);

            context.Response.End();
        }
    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM