画像アップロードしたい

締切済

質問者：宮1958
質問日時：2016/10/26 00:23
回答数：2件

画像アップスクリプトについてこんにちは。先にお...
プロフィール画像
miyasita1958さん 2016/10/25 09:46:34
助けてください。画像アップスクリプトについて

こんにちは。先にお願いですが、そろそろ還暦を迎える年寄りをです。勝手いってすみませんが知識も少なく具体的な回答でないと理解できません。高齢者でも、現在の画像をアップできるようにクリップボードからのアップが思いつき、WEBで検索して切り張りして途中までつくりましたが、最後のアップロード方法がわかりません。
ソース載せました。?????の引数はどうしたら渡せるでしょうか？

<script>
var src_canvas;
var src_ctx;
var image;

// ブラウザ判定
var clipboard_flg;
if((!window.navigator.msSaveBlob) &&
(window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){
// chrome
clipboard_flg = true;
}else if((window.navigator.msSaveBlob) &&
(window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){
// Edge
clipboard_flg = true;
}else{
// その他
clipboard_flg = false;
}

window.onload = function(){

src_canvas = document.getElementById("SrcCanvas");
src_ctx = src_canvas.getContext("2d");

image = document.getElementById("img_source");
}

if (clipboard_flg){

document.addEventListener('paste', function(e) {

e.preventDefault();

var items = e.clipboardData.items;
var dti = null;

for(i = 0; i < items.length; i++) {
if(items[i].type.indexOf("image") != -1) {
dti = items[i];
break;
}
}

if(dti){
image.onload = function(){
src_canvas.width = image.width;
src_canvas.height = image.height;
src_ctx.drawImage(image,0,0);
}
image.src = window.URL.createObjectURL(dti.getAsFile());

}else{
alert('err');
}

});
}

function getClipboardImage(){

if (clipboard_flg) return false;

function SearchImage(parent){

for(var i=0;i< parent.children.length;i++){
var child = parent.children[i];

if(child.nodeName.toUpperCase() == 'IMG'){
try{

var pollution_canvas = document.createElement("canvas");
pollution_canvas.style.display = 'none';
document.body.appendChild(pollution_canvas);
pollution_canvas.width = child.width;
pollution_canvas.height = child.height;
pollution_ctx = pollution_canvas.getContext("2d");

try{
pollution_ctx.drawImage(child,0,0);
}catch(e){
throw 'SecurityError';
}
pollution_ctx.getImageData(0, 0, pollution_canvas.width, pollution_canvas.height);
document.body.removeChild(pollution_canvas);

src_canvas.width = child.width;
src_canvas.height = child.height;

src_ctx.drawImage(child,0,0);
}catch(e){
alert(e +'\n\n' +'ｘｘｘ\n'+'※Chromeをご利用ください。');
}
return true;
}
}

// 再帰処理
for(var i=0;i< parent.children.length;i++){
if (SearchImage(parent.children[i])) return true;
}
}
var paste = document.getElementById("PasteArea");
SearchImage(paste);
paste.innerHTML = '【使い方】～。';
document.getElementById("PasteArea").style.border='2px solid #ccc';
}

// ファイルアップロード
function upload_file_with_ajax(file){
var formData = new FormData();
formData.append('file', file);
$.ajax('/upload/image' , {
type: 'POST',
contentType: false,
processData: false,
data: formData,
error: function() {
success: function(res) {

}
});
}

function upload_file(){
upload_file_with_ajax(?????);
}

</script>
</head>
<body>
<p></p>
<div id="PasteArea" contenteditable="true" onkeyup ="getClipboardImage();"
onclick="PasteArea.style.border='1px solid #1e90ff';"
onblur="PasteArea.style.border='1px solid #ccc';"
style="width:90%;height:90px;border:1px solid #ccc;padding:10px;">
【使い方】<br>
１．このエリアをマウスでクリックします。<br>
２．キーボードの「Ctrl」キーを押しながら「V」キーを押します。<br>
３．アップロードをクリックします。<br>
</div>
<form name="form1" method="post"">
<input type="button" value="アップロード" onclick="upload_file()"/>
</form>
<img id="img_source" style="display:none;">
<canvas id="SrcCanvas"></canvas>