logo标签列表

使用ajax上传图片而无需使用表单

javascriptjqueryhtmlajax
3
我知道在html5（以及通常的html）中，表单嵌套不是有效的选项，因此我想了解如何在不使用另一个表单的情况下在表单中上传文件。
我有一个表单，用户可以从下拉列表中选择一张图片。我想让用户在填写表单的同时能够添加另一张图片。然后将新图片作为下拉列表中的选项添加到其中，供用户选择。
编辑：当我说“从下拉列表中选择一张图片”时，我的意思是这些图片存储在服务器上的特定文件夹中。在下拉列表中，我显示文件名（存储在数据库中）。将新图像添加到文件夹中将其添加到数据库并将新图像名称添加到下拉列表中。但每个下拉选项只会是：
<option value="id_from_db">Image_name_from_db</option>

数据库中的表格会有以下几个字段：id - name - path_to_file

通常我使用 jquery Form 插件 来上传新的图片，这个插件会查找带有 <input type="file"> 标签的表单来完成上传。有没有办法在没有嵌套表单的情况下上传图片？我想过使用 iframe，但这看起来像是个疯狂的想法。实际的 HTML 结构如下：

<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格式，无法正常工作。

你所描述的一切听起来都是可能的，但是这句话：“新图像将作为下拉菜单选项添加，用户可以选择它。” 是个问题。要上传文件，你需要能够从文件输入中获取它的二进制数据。而所有选择操作都只会给你一个字符串值，因此你需要某种方式来保持一个隐藏的文件输入，以匹配从选择操作中选择的任何选项。 - Rory McCrossan
@RoryMcCrossan 我会将图像保存为文件并存储在一个文件夹中。在数据库中，我会保存图像名称和文件夹路径。在选择用户时，用户将从数据库中看到图像名称作为选项，并以记录ID作为值。文件本身将仅位于文件夹中，并且稍后将被使用（主要表单用于定义HTML页面的内容）。希望这样更有意义。 :) - Lelio Faieta
1
我不熟悉jQuery Form，但WebAPI有一个FormData对象可能会对你有所帮助。在主表单提交时，阻止事件，将图像作为Blob发送，等待服务器响应并使用剩余信息构建新的FormData，或者在响应中添加新的<option>与新ID。 - Kaiido
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Heemanshu Bhalla
2个回答
3
您可以使用readAsDataURL方法在下拉列表中显示图像。或者在用户使用文件输入上传图像后，只需添加一个选项，如“使用自己的图像”。
然后，您可以像平常一样发布表单，包含用户的图像和他想要使用的信息。将这两个信息连接起来将在服务器端发生。
如果您绝对要先上传图像，请使用AJAX。jQuery可以从输入获取值，而不考虑表单的其他部分：
$(imageInput).on('change', function(){
    var data = this.files[0];
    $.post(imagePostUrl, data);
});

在HTML中，要么将imageInput放在表单外，要么在表单提交时使用JavaScript从表单数据中删除图像输入，如果您不希望再次上传图像。请注意，这仅适用于符合HTML5标准的浏览器。旧版浏览器无法通过此方式通过AJAX发送文件。
不，我想要单独进行上传，检查已发布文件的文件扩展名等，如果上传验证成功，则让用户能够发布主表单。 - Lelio Faieta
如果imageInput是一个文件输入，那么data将只是表示文件名的字符串。 - Kaiido
@Kaiido 我同意你的观点。 - Lelio Faieta
@KWeiss 如果我需要将文本输入值与文件一起传递怎么办？我会用json数组，但不知道将数据值作为键放什么。 - Lelio Faieta
你放入作为键的内容会根据你的服务器如何处理请求而有所不同。你可以使用任何你喜欢的键。 - KWeiss
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 file : ajax_upload_image_main.php

<html>
<head>
<title>Ajax Image Upload Using PHP and jQuery</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
<h4 id='loading' >loading..</h4>
<div id="message"></div>
</body>
</html>

完整的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 Script : ajax_php_file.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>";
}
}
?>
不是我给你点了踩，但我没有任何问题去做你说的一切。你忽略了这将发生在另一个表单内（而且这不是有效的HTML）。但还是谢谢你的回答。 - Lelio Faieta
1
@LelioFaieta 如果你在谈论有效性，那么在表单中使用FORM并不是真正有效的。你可以查看这个Stackoverflow帖子链接。别担心，我希望你能找到更好的解决方案。 - hmd
正如您从我的问题中所看到的，那是我的第一个假设。 - Lelio Faieta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接