mcyl常用筆記 – 大尊的數位筆記本

#UpdatePanel上傳圖片

javascript code

function pageLoad()
{
    $("input[type=hidden][id*=photo]").each(function(){
        var l_id = $(this).attr("id");
        var oInput = document.createElement("input");
        oInput.setAttribute('type', 'file');
        oInput.setAttribute('accept', 'image/*');
        oInput.setAttribute('capture', 'camera');
        oInput.onchange = function () {  
            imgOnChange(this,l_id);
        };
        $(this).after(oInput);
        if( $(this).val() != "" )
        {
            $('body').trigger('create');
            $(oInput).after("<img width='50%' style='padding-left: 6px;' src='"+$(this).val()+"' />");
        }
    });
    $('body').trigger('create');
}
function imgOnChange(obj,base64Input)
{
    $(obj).parent().find("img").remove();
    document.getElementById(base64Input).value = "";
    var reader = new FileReader();
    reader.onload = function (e) {
        var oImg = document.createElement("img");
        oImg.src = e.target.result;
        oImg.setAttribute('style', 'padding-left: 6px;');
        oImg.setAttribute('width', '50%');
        oImg.onload = function () {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            ctx.clearRect( 0, 0, canvas.width, canvas.height);
            canvas.width = this.width * 4;
            canvas.height = this.height * 4;
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            var base64Codes = canvas.toDataURL("image/jpeg", 3);
            document.getElementById(base64Input).value = base64Codes;
        };
        obj.parentNode.appendChild(oImg);
    };
    reader.readAsDataURL(obj.files[0]);
}

c#前端code

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" data-role="page">
    <ContentTemplate>
        <div>
            <h4>照片*</h4>
            <asp:HiddenField runat="server" ID="photo01" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

c#後端code，可再優化成迴圈方式

string photoFolderName = "photo"; //可調
string appName = System.IO.Path.GetFileName(Request.PhysicalPath).Replace(".aspx", "");
string datetime = DateTime.Now.ToString("yyyyMMddHHmmss");
string photoFolderUrl = Server.MapPath("../" + photoFolderName + "/");
string BindName = "photo01";
string fileName = string.Format("{0}_{1}_{2}_{3}.jpg", appName, BindName, cylNum.Text, datetime);
string photofileUrl = photoFolderUrl + fileName;
string base64Str = photo01.Value.ToString().Split(',').Last();
Byte[] bytes = Convert.FromBase64String(base64Str);
System.IO.File.WriteAllBytes(photofileUrl, bytes);
string photo_url = string.Format("./{0}/{1}", photoFolderName, fileName);

#GridView與DetailsView控件連動
當DetailsView已經更新，連動GridView更新