使用 Ajax 以 PHP 形式上传图像提交

我想使用ajax将表单数据提交到MySQL。我对 Ajax 不是很熟悉，但我尝试了一个我理解的代码，所有文本数据都提交到数据库中，我无法使用此代码上传和存储图像，我不知道该怎么做。并且还使用标题移动到另一个页面，但我不知道我在哪里编写该代码...！这是我的表格和脚本

<html>
<body>
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
           	var nkname = document.getElementById('nkname').value;
            var sweaterpic= document.getElementById('sweaterpic').value;
	        var size= document.getElementById('size').value;
            var category= document.getElementById('category').value;
         	var style= document.getElementById('style').value;
            var fabric= document.getElementById('fabric').value;
	        var aboutsweater= document.getElementById('aboutsweater').value;
	
	var queryString = "?nkname=" + nkname + "&sweaterpic=" + sweaterpic + "&size=" + size + "&category=" + category+ "&style=" + style+ "&fabric=" + fabric+ "&aboutsweater=" + aboutsweater;
	ajaxRequest.open("GET", "Uploadsweater1.php" + queryString, true);
	ajaxRequest.send(null); 
}
</script>
<form name='myForm' enctype="multipart/form-data">
Sweater Nick name: <input type='text' id='nkname' /> <br />
Sweater Pic:<input type="file" id="sweaterpic" class="form-control" style="width:96%;"></br>
Select Size:<select id="size" placeholder="Size">
					<option value="select">--Choose Size--</option>
					<option value="XS">XS</option>
					<option value="S">S</option>
					<option value="M">M</option>
					<option value="L">L</option>
					<option value="XL">XL</option>
					<option value="XXL">XXL</option>
				</select><br />
Select Category: <select id="category" placeholder="Category">
                                 <option value="select">--Choose Category--</option>
                                <option value="Men">Men</option>
                                <option value="Women">Women</option>
                                <option value="Kids">Kids</option>
                                </select><br />
Select Style:<select id="style"  placeholder="Style">
					<option value="select">--Choose Style--</option>
					<option value="Cardigan">Cardigan - Sweater that opens in the front.</option>
					<option value="Pullover">Pullover - Sweater that is put on over your head with no opening in the front.</option>
					<option value="Vest">Vest - Any sweater without arms is a vest even if you pull it over your head or it has an open front.</option>
				</select><br />
Select Fabric:<select id="fabric"  placeholder="Fabric">
					<option value="select">--Choose Fabric--</option>
					<option value="Cotton">Cotton</option>
					<option value="Wool">Wool</option>
					<option value="Polyester">Polyester</option>
					<option value="Nylon">Nylon</option>
					<option value="Acrylic">Acrylic</option>
					<option value="Lycra">Lycra</option>
					<option value="Rayon">Rayon</option>
					<option value="Other">Other</option>
				</select><br />
About Sweater:<textarea cols="30" rows="10" id="aboutsweater"  placeholder="About this Sweater"></textarea> <br />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

这是上传毛衣1.php：

<?php
include('connection.php');
    // Retrieve data from Query String
$nkname= $_GET['nkname'];
$sweaterpic=$_GET['sweaterpic'];
$size= $_GET['size'];
$category= $_GET['category'];
$style= $_GET['style'];
$fabric= $_GET['fabric'];
$aboutsweater= $_GET['aboutsweater'];
        $filename =  $_FILES['sweaterpic']['name'];
        $filetype =  $_FILES['sweaterpic']['type'];
        $filesize =  $_FILES['sweaterpic']['size'];
        $filepath =  $_FILES['sweaterpic']['tmp_name'];

    $m = move_uploaded_file($filepath,"upload/".$filename);
                // Escape User Input to help prevent SQL Injection
$nkname= mysql_real_escape_string($nkname);
$size= mysql_real_escape_string($size);
$category= mysql_real_escape_string($category);
$style= mysql_real_escape_string($style);
$fabric= mysql_real_escape_string($fabric);
$aboutsweater= mysql_real_escape_string($aboutsweater);
$q="insert into `usersweater`(`SNickname`,`Sweaterpic`,`Size`,`Category`,`Fabric`,`Style`,`About`) values('$nkname','$filename ','$size','$category','$fabric','$style','$aboutsweater')";
$r=mysql_query($q);
?>

我错了

您无法使用 GET 上传文件，请使用 POST

此外，在将文件放入服务器/应用程序之前，您应该对文件进行一些检查。

检查与此类似的错误

        $error = $_FILES['sweaterpic']['error'];
        // Check errors
        if($error > 0) {
            $debugHTML = "<span class='error'>Error on upload: ";
            switch ($error) {
                case 1: $debugHTML .= "File exceeded upload_max_filesize";    break;
                case 2: $debugHTML .= "File exceeded max_file_size"; break;
                case 3: $debugHTML .= 'File only partially uploaded'; break;
                case 4: $debugHTML .= 'No file uploaded'; break;
            }                                 
            $debugHTML .= '</span><br />';

并确保它是图像。这是我为旧应用程序制作的东西。

$a = getimagesize($filePath);
if(!$a) {
    if(is_dir($filePath))
        rmdir($filePath); // Delete directory
    else
        unlink($filePath); // Delete file
    return false;
}
$type = $a['mime'];
if($type != 'image/gif' && $type != 'image/jpeg' && $type != 'image/png') {
    unlink($filePath);
    return false;
}

相关内容

最新更新

热门标签：