[{"data":1,"prerenderedAt":486},["ShallowReactive",2],{"\u002Fother_memorandum\u002Fjava_script":3},{"id":4,"title":5,"body":6,"date":476,"description":477,"draft":478,"extension":479,"meta":480,"navigation":481,"path":482,"seo":483,"stem":484,"__hash__":485},"blog\u002F900.other_memorandum\u002F07.java_script.md","Javascriptについて",{"type":7,"value":8,"toc":466},"minimark",[9,14,18,22,92,121,124,264,284,287,302,306,324,327,450,453,462],[10,11,13],"h2",{"id":12},"javascript-ユーザに画像を選択させる","JavaScript ユーザに画像を選択させる",[15,16,17],"p",{},"ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。",[19,20,21],"h3",{"id":21},"画像を選択させるための導線",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-html shiki shiki-themes github-light","\u003Cinput type=\"file\" id=\"myImage\" accept=\"image\u002F*\">\n\u003Cimg id=\"preview\">\n\n","html","",[30,31,32,75],"code",{"__ignoreMap":28},[33,34,37,41,45,49,52,56,59,61,64,67,69,72],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sgsFI","\u003C",[33,42,44],{"class":43},"shJU0","input",[33,46,48],{"class":47},"s7eDp"," type",[33,50,51],{"class":39},"=",[33,53,55],{"class":54},"sYBdl","\"file\"",[33,57,58],{"class":47}," id",[33,60,51],{"class":39},[33,62,63],{"class":54},"\"myImage\"",[33,65,66],{"class":47}," accept",[33,68,51],{"class":39},[33,70,71],{"class":54},"\"image\u002F*\"",[33,73,74],{"class":39},">\n",[33,76,78,80,83,85,87,90],{"class":35,"line":77},2,[33,79,40],{"class":39},[33,81,82],{"class":43},"img",[33,84,58],{"class":47},[33,86,51],{"class":39},[33,88,89],{"class":54},"\"preview\"",[33,91,74],{"class":39},[93,94,95,101,111],"ul",{},[96,97,98,100],"li",{},[30,99,44],{}," タグを使う。",[96,102,103,106,107,110],{},[30,104,105],{},"type"," は ",[30,108,109],{},"file"," を指定する。",[96,112,113,116,117,120],{},[30,114,115],{},"accept"," というattributeがあるから、それに ",[30,118,119],{},"image\u002F*"," を設定する。",[19,122,123],{"id":123},"ユーザが選択した画像を画面に反映する",[23,125,129],{"className":126,"code":127,"language":128,"meta":28,"style":28},"language-javascript shiki shiki-themes github-light","$('#myImage').on('change', function (e) {\n  var reader = new FileReader();\n  reader.onload = function (e) {\n    $(\"#preview\").attr('src', e.target.result);  \n  }\n  reader.readAsDataURL(e.target.files[0]); \n});\n\n","javascript",[30,130,131,170,189,210,234,240,258],{"__ignoreMap":28},[33,132,133,136,139,142,145,148,150,153,156,160,163,167],{"class":35,"line":36},[33,134,135],{"class":47},"$",[33,137,138],{"class":39},"(",[33,140,141],{"class":54},"'#myImage'",[33,143,144],{"class":39},").",[33,146,147],{"class":47},"on",[33,149,138],{"class":39},[33,151,152],{"class":54},"'change'",[33,154,155],{"class":39},", ",[33,157,159],{"class":158},"sD7c4","function",[33,161,162],{"class":39}," (",[33,164,166],{"class":165},"sqxcx","e",[33,168,169],{"class":39},") {\n",[33,171,172,175,178,180,183,186],{"class":35,"line":77},[33,173,174],{"class":158},"  var",[33,176,177],{"class":39}," reader ",[33,179,51],{"class":158},[33,181,182],{"class":158}," new",[33,184,185],{"class":47}," FileReader",[33,187,188],{"class":39},"();\n",[33,190,192,195,198,201,204,206,208],{"class":35,"line":191},3,[33,193,194],{"class":39},"  reader.",[33,196,197],{"class":47},"onload",[33,199,200],{"class":158}," =",[33,202,203],{"class":158}," function",[33,205,162],{"class":39},[33,207,166],{"class":165},[33,209,169],{"class":39},[33,211,213,216,218,221,223,226,228,231],{"class":35,"line":212},4,[33,214,215],{"class":47},"    $",[33,217,138],{"class":39},[33,219,220],{"class":54},"\"#preview\"",[33,222,144],{"class":39},[33,224,225],{"class":47},"attr",[33,227,138],{"class":39},[33,229,230],{"class":54},"'src'",[33,232,233],{"class":39},", e.target.result);  \n",[33,235,237],{"class":35,"line":236},5,[33,238,239],{"class":39},"  }\n",[33,241,243,245,248,251,255],{"class":35,"line":242},6,[33,244,194],{"class":39},[33,246,247],{"class":47},"readAsDataURL",[33,249,250],{"class":39},"(e.target.files[",[33,252,254],{"class":253},"sYu0t","0",[33,256,257],{"class":39},"]); \n",[33,259,261],{"class":35,"line":260},7,[33,262,263],{"class":39},"});\n",[93,265,266,271,281],{},[96,267,268,270],{},[30,269,44],{}," に対して、ユーザが何かしら選択したことを検知するリスナーを付与。",[96,272,273,276,277,280],{},[30,274,275],{},"FileReader"," で読み込んで、読み込んだ画像をsourceとして ",[30,278,279],{},"image"," タグに付与。",[96,282,283],{},"なお、上のサンプルはjQueryで書いてる。",[19,285,286],{"id":286},"参考",[93,288,289],{},[96,290,291],{},[292,293,297,298,301],"a",{"href":294,"rel":295},"https:\u002F\u002Fwww.softel.co.jp\u002Fblogs\u002Ftech\u002Farchives\u002F5676",[296],"nofollow","【JavaScript】input",[33,299,300],{},"type=”file”","で選択した画像をimg要素で表示する",[10,303,305],{"id":304},"javascript-http通信で情報取得する","JavaScript  HTTP通信で情報取得する",[307,308,309,315,318,321],"ol",{},[96,310,311,314],{},[30,312,313],{},"XMLHttpRequest"," オブジェクトを作る",[96,316,317],{},"取得URLやメソッドを設定する",[96,319,320],{},"取得した時の制御をコールバックとして実装する",[96,322,323],{},"通信開始メソッドをコールする",[15,325,326],{},"上記を踏まえたサンプルは以下。",[23,328,330],{"className":126,"code":329,"language":128,"meta":28,"style":28},"\u002F\u002F 1. XMLHttpRequestの生成\nvar xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function () {\n    \u002F\u002F 3. 取得した時の制御\n    if (xhr.readyState == 4) {\n        \u002F\u002F 取得成功\n    }\n};\n\u002F\u002F 2. 取得URL・メソッドの設定\nxhr.open(\"GET\", \"http:\u002F\u002Fwww.example.org\u002Fexample.txt\");\n\u002F\u002F 4. 通信開始メソッドをコール\nxhr.send();\n\n",[30,331,332,338,355,370,375,391,396,401,407,413,434,440],{"__ignoreMap":28},[33,333,334],{"class":35,"line":36},[33,335,337],{"class":336},"sAwPA","\u002F\u002F 1. XMLHttpRequestの生成\n",[33,339,340,343,346,348,350,353],{"class":35,"line":77},[33,341,342],{"class":158},"var",[33,344,345],{"class":39}," xhr ",[33,347,51],{"class":158},[33,349,182],{"class":158},[33,351,352],{"class":47}," XMLHttpRequest",[33,354,188],{"class":39},[33,356,357,360,363,365,367],{"class":35,"line":191},[33,358,359],{"class":39},"xhr.",[33,361,362],{"class":47},"onreadystatechange",[33,364,200],{"class":158},[33,366,203],{"class":158},[33,368,369],{"class":39}," () {\n",[33,371,372],{"class":35,"line":212},[33,373,374],{"class":336},"    \u002F\u002F 3. 取得した時の制御\n",[33,376,377,380,383,386,389],{"class":35,"line":236},[33,378,379],{"class":158},"    if",[33,381,382],{"class":39}," (xhr.readyState ",[33,384,385],{"class":158},"==",[33,387,388],{"class":253}," 4",[33,390,169],{"class":39},[33,392,393],{"class":35,"line":242},[33,394,395],{"class":336},"        \u002F\u002F 取得成功\n",[33,397,398],{"class":35,"line":260},[33,399,400],{"class":39},"    }\n",[33,402,404],{"class":35,"line":403},8,[33,405,406],{"class":39},"};\n",[33,408,410],{"class":35,"line":409},9,[33,411,412],{"class":336},"\u002F\u002F 2. 取得URL・メソッドの設定\n",[33,414,416,418,421,423,426,428,431],{"class":35,"line":415},10,[33,417,359],{"class":39},[33,419,420],{"class":47},"open",[33,422,138],{"class":39},[33,424,425],{"class":54},"\"GET\"",[33,427,155],{"class":39},[33,429,430],{"class":54},"\"http:\u002F\u002Fwww.example.org\u002Fexample.txt\"",[33,432,433],{"class":39},");\n",[33,435,437],{"class":35,"line":436},11,[33,438,439],{"class":336},"\u002F\u002F 4. 通信開始メソッドをコール\n",[33,441,443,445,448],{"class":35,"line":442},12,[33,444,359],{"class":39},[33,446,447],{"class":47},"send",[33,449,188],{"class":39},[19,451,286],{"id":452},"参考-1",[93,454,455],{},[96,456,457],{},[292,458,461],{"href":459,"rel":460},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FXMLHttpRequest\u002FUsing_XMLHttpRequest",[296],"XMLHttpRequest の使用",[463,464,465],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":28,"searchDepth":77,"depth":77,"links":467},[468,473],{"id":12,"depth":77,"text":13,"children":469},[470,471,472],{"id":21,"depth":191,"text":21},{"id":123,"depth":191,"text":123},{"id":286,"depth":191,"text":286},{"id":304,"depth":77,"text":305,"children":474},[475],{"id":452,"depth":191,"text":286},"2026-06-14T07:00:00+09:00","Javascriptの備忘録です。",false,"md",{},true,"\u002Fother_memorandum\u002Fjava_script",{"title":5,"description":477},"900.other_memorandum\u002F07.java_script","XJ_F2Q_3aWfzMC4pzriI-Ai4PkerePFXKMQY9DFUNSI",1781530000756]