<form action="同じページ"> <input type="file" name="file" ・・・/> <div>ドラッグ&ドロップ</div> <img id="image" alt=""> いろいろ<input>や<textarea>など住所録のようなフォーム <input type="submit"・・/> </form>
上記のように、ファイル選択とドラッグ&ドロップの2つを用意し、どちらを使っても<img>に対してDOM操作を行い画像を表示させるようにしました。ここまでは問題なくできています。
スクリプトでドラッグした後の処理に、画像を<img>に表示させたあとに、サーバー側にアップロードをさせたくスクリプトを書いたのですが、ドラッグ&ドロップのほうがアップロードできずに困っています。
アップロードですが、$_FILEに一時的に保存させるだけをしたいのです。
いろんなサイトを見ると、アップロード=$_FILEに一時保存させた後にすぐmoveを使って移動させることを、ajaxのバック関数(php)でさせているものが多いので、なかなか一時保存にたどり着きません。
スクリプト側は以下のとおりです。
関数imageFileUploadの内容がおかしいのではと思うのですが、よくわかりません。
フロントエンドにwordpressを使っていますが、使う画面は公開画面レベルなので独自のajaxにしています。
どなたか見ていただけないでしょうか?
window.onload=function() { var print_img_id = 'print_img'; var print_DataURL_id = 'print_DataURL'; if (checkFileApi()){ var file_image = document.getElementById('file-image'); //ファイル選択 file_image.addEventListener('change', selectReadfile, false); var dropZone = document.getElementById('drop-zone'); //ドラッグオンドロップ dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleDragDropFile, false); } function checkFileApi() { // FileAPIに対応しているか // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { return true; // Great success! All the File APIs are supported. } alert('The File APIs are not fully supported in this browser.'); return false; } function selectReadfile(e) { //ファイルが選択されたら読み込む var file = e.target.files; var reader = new FileReader(); //dataURL形式でファイルを読み込む reader.readAsDataURL(file[0]); //ファイルの読込が終了した時の処理 reader.onload = function(){ readImage(reader, print_img_id, print_DataURL_id); } } function handleDragOver(e) { //ドラッグ&ドロップ e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. } function handleDragDropFile(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; // FileList object. var file = files[0]; var reader = new FileReader(); reader.readAsDataURL(file); //dataURL形式でファイルを読み込む reader.onload = function(){ //ファイルの読込が終了した時の処理 readImage(reader, print_img_id, print_DataURL_id); //処理(1) imageFileUpload(files[0]); //処理(2) } } //ファイルの読込が終了した時の処理(1)HTML書き出し function readImage(reader, print_image_id, print_DataURL_id ){ //ファイル読み取り後の処理 var result_DataURL = reader.result; var img = document.getElementById('image'); //読み込んだ画像とdataURLを書き出す var src = document.createAttribute('src'); src.value = result_DataURL; img.setAttributeNode(src); } //ファイルの読込が終了した時の処理(2)ファイルをアップロード function imageFileUpload(f){ var formData =new FormData(); formData.append('image', f); $.ajax({ type:'POST', contentType:false, processData:false, url:'http://xxxxxxx.xxx/public_html/wp-content/uploads', data:formData, dataType:'json', success:function(data){ //何かする。デバッグしたいがalert出力できない。??? }, error:function(data){ //何かする } }); } }