<formmethod="post"enctype="multipart/form-data"><divid="dragDropArea"><divclass="drag-drop-inside"><pclass="drag-drop-info">ここにファイルをドロップ</p><p>または</p><pclass="drag-drop-buttons"><inputid="fileInput"type="file"accept="image/*"value="ファイルを選択"name="photo"onChange="photoPreview(event)"></p><divid="previewArea"></div></div></div><buttontype="submit"name="submit"value="登録">登録<button></form>

#dragDropArea{background-color:#f4f4f4;margin:10px;padding:10px;border:#ddddashed5px;min-height:200px;text-align:center;}#dragDropAreap{color:#999;font-weight:bold;font-size:14px;font-size:1.4em;}#dragDropArea.drag-drop-buttons{margin-top:20px;font-size:12px;font-size:1.2em;}.drag-drop-buttonsinput{margin:auto;}

varfileArea=document.getElementById('dragDropArea');varfileInput=document.getElementById('fileInput');fileArea.addEventListener('dragover',function(evt){evt.preventDefault();fileArea.classList.add('dragover');});fileArea.addEventListener('dragleave',function(evt){evt.preventDefault();fileArea.classList.remove('dragover');});fileArea.addEventListener('drop',function(evt){evt.preventDefault();fileArea.classList.remove('dragenter');varfiles=evt.dataTransfer.files;console.log("DRAG & DROP");console.table(files);fileInput.files=files;photoPreview('onChenge',files[0]);});functionphotoPreview(event,f=null){varfile=f;if(file===null){file=event.target.files[0];}varreader=newFileReader();varpreview=document.getElementById("previewArea");varpreviewImage=document.getElementById("previewImage");if(previewImage!=null){preview.removeChild(previewImage);}reader.onload=function(event){varimg=document.createElement("img");img.setAttribute("src",reader.result);img.setAttribute("id","previewImage");preview.appendChild(img);};reader.readAsDataURL(file);}