フォームを使わずにajaxで画像をアップロードする

Question

フォームネストはhtml5（と一般的にはHTML）の有効なオプションではないことがわかっているので、フォーム内でファイルをアップロードするにはどうすればよいですか？形。

私はユーザーがドロップダウンから1つのイメージを選択できるフォームを持っています。フォームを塗りつぶしながら、別の画像を追加する機能をユーザーに与えたいと思います。新しい画像がドロップダウンにオプションとして追加され、ユーザーはそれを選択することができます。

編集：「ドロップダウンから画像を選択する」とは、画像が特定のフォルダのサーバーに保存されていることを意味します。ドロップダウンでは、ファイル名（dbに格納されている）を表示します。フォルダに新しいイメージを追加すると、db toに追加され、新しいイメージ名が選択に追加されます。通常

私は新しいイメージをアップロードするjquery Form pluginを使用path_to_fileし、このプラグインはフォームを探します - 名前 - ID：

<option value="id_from_db">Image_name_from_db</option> 

とDB内のテーブル

があります。しかし、それぞれの選択オプションだけになりますアップロードを行うには <input type="file">タグを使用してください。入れ子になっていないフォームをアップロードする機会はありますか？私はiframeを使用することを考えていたが、これは狂った考えのように見える。私は何の問題は、メインフォームを投稿していない

<form> 
    //some more stuffs for the main form 
    <select name="image"> 
     <option>existing options</option> 
    </select> 
    <form> 
     <input type="file"> 
     <button>Upload file</button> 
    </form> 
    //some more stuffs for the main form 
    <button>Submit form</button> 
</form> 

、私が選択するためのオプションとして、新しいファイルを追加する何の問題を持っていない：実際のHTML構造は次のようになります。しかし、この構造は有効なhtmlではなく、動作しません。

Answer 1

readAsDataURLメソッドを使用して、画像をドロップダウンリストに表示することができます。または、ユーザーがファイル入力を使用して画像をアップロードした後に、「自分の画像を使用する」などのオプションを追加するだけです。

次に、ユーザーのイメージと彼が使用したいと思う情報の両方を含んでいる通常のフォームを投稿できます。 2つの情報の接続は、サーバー側で行われます。

初めて画像をアップロードする場合は、AJAXを使用してください。 HTMLで

$(imageInput).on('change', function(){ 
    var data = this.files[0]; 
    $.post(imagePostUrl, data); 
}); 

を、いずれかのフォームがあるときに、フォームの外imageInputを置く、またはJavaScriptを使用してフォームデータからの画像入力を削除する：jQueryのは、フォームの残りの部分を考慮せずに入力から値を取得することができます画像をもう一度アップロードしたくない場合は送信してください。

これはHTML5準拠のブラウザでのみ機能することにご注意ください。古いブラウザはAJAX経由でこのようにファイルを送信することはできません。

Answer 2

次の手順は、このプロセスの下で指摘されています

1. はjQueryライブラリを含めます。

2. アップロードフィールドのHTMLページ。

3. jQuery Ajaxコード。

4. イメージを保存するPHPスクリプト。

のAjaxコード：画像を保存するために使用

$.ajax({ 
    url: "ajax_php_file.php", // Url to which the request is send 
    type: "POST",    // Type of request to be send, called as method 
    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
    contentType: false,  // The content type used when sending data to the server. 
    cache: false,    // To unable request pages to be cached 
    processData:false,  // To send DOMDocument or non processed data file it is set to false 
    success: function(data) // A function to be called if request succeeds 
    { 
     $('#loading').hide(); 
     $("#message").html(data); 
    } 
}); 

PHPコード：

$sourcePath = $_FILES['file']['tmp_name'];  // Storing source path of the file in a variable 
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored 
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file 

HTMLファイル：

01 ajax_upload_image_main.php

完全なjQueryのコード：script.js

$(document).ready(function (e) { 
$("#uploadimage").on('submit',(function(e) { 
e.preventDefault(); 
$("#message").empty(); 
$('#loading').show(); 
$.ajax({ 
url: "ajax_php_file.php", // Url to which the request is send 
type: "POST",    // Type of request to be send, called as method 
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
contentType: false,  // The content type used when sending data to the server. 
cache: false,    // To unable request pages to be cached 
processData:false,  // To send DOMDocument or non processed data file it is set to false 
success: function(data) // A function to be called if request succeeds 
{ 
$('#loading').hide(); 
$("#message").html(data); 
} 
}); 
})); 

// Function to preview image after validation 
$(function() { 
$("#file").change(function() { 
$("#message").empty(); // To remove the previous error message 
var file = this.files[0]; 
var imagefile = file.type; 
var match= ["image/jpeg","image/png","image/jpg"]; 
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))) 
{ 
$('#previewing').attr('src','noimage.png'); 
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>"); 
return false; 
} 
else 
{ 
var reader = new FileReader(); 
reader.onload = imageIsLoaded; 
reader.readAsDataURL(this.files[0]); 
} 
}); 
}); 
function imageIsLoaded(e) { 
$("#file").css("color","green"); 
$('#image_preview').css("display", "block"); 
$('#previewing').attr('src', e.target.result); 
$('#previewing').attr('width', '250px'); 
$('#previewing').attr('height', '230px'); 
}; 
}); 

PHPスクリプト：

<?php 
if(isset($_FILES["file"]["type"])) 
{ 
$validextensions = array("jpeg", "jpg", "png"); 
$temporary = explode(".", $_FILES["file"]["name"]); 
$file_extension = end($temporary); 
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg") 
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded. 
&& in_array($file_extension, $validextensions)) { 
if ($_FILES["file"]["error"] > 0) 
{ 
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>"; 
} 
else 
{ 
if (file_exists("upload/" . $_FILES["file"]["name"])) { 
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> "; 
} 
else 
{ 
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable 
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored 
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file 
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; 
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; 
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; 
echo "<b>Size:</b> " . ($_FILES["file"]["size"]/1024) . " kB<br>"; 
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; 
} 
} 
} 
else 
{ 
echo "<span id='invalid'>***Invalid file Size or Type***<span>"; 
} 
} 
?>