我在使用jquery将图像上传到数据库时在php中出错，变量中的数据也许没有通过

我的代码是一个表单，它从用户那里选择一个文件，然后使用jQuery将数据发送到PHP文件，在那里它获取图像内容并显示它并在成功函数中：它警告从PHP文件接收的数据。 例如，从HTML页面接收的图像。

实际上，代码将图像插入到数据库中，但我将代码插入并在PHP文件中直接插入图像而不插入数据库，因为我想缩短它（数据库插入代码没有错误：它插入其他随图像和图像提供的变量保持空白）

我也在XAMPP localhost上使用我的脚本。 所以不要担心我正在运行它像file：// …. 一切都是我无法弄清楚为什么数据没有传递给php文件。

HTML：

JavaScript的：

 $("#submit-form").click(function() { var formadata = { "photo": $("#photo").val(), }; $.ajax({ url: './enter-registration-form.php', data: formadata, cache: false, contentType: false, processData: false, method: 'POST', success: function(val) { if (val == "done") { alert("Data Accepted"); } else { alert(val); } } }); }); 

PHP：

 $i = $_FILES['photo']['name']; //get the content of the image and then add slashes to it $imagetmp=addslashes (file_get_contents($_FILES['photo']['tmp_name'])); echo ''; 

现在我收到此错误消息：

注意 ：未定义的索引：第5行的/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中的photo

注意 ：未定义的索引：第8行的/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中的photo

警告 ： file_get_contents() ：第8行的/opt/lampp/htdocs/SSNC/exam/enter-registration-form.php中的文件名不能为空

我无法弄清楚为什么会抛出这个错误。

Answer 1

这应该工作！

HTML：

 
   Upload   

JS：

 $("button").click(function(e) { /* prevent default form action */ e.preventDefault(); /* get form element */ var formElement = document.getElementById("my-upload-form"); /* collect all form data from Form element */ var formData = new FormData(formElement); $.ajax({ url: '/path-to-form-handler.php', data: formData, cache: false, contentType: false, processData: false, method: 'POST', success: function(response) { console.log(response); } }); }); 

PHP：

Answer 2

途径

您需要使用new FormData()对象。

FormData接口提供了一种方法，可以轻松构造一组表示表单字段及其值的key/value对，然后可以使用XMLHttpRequest.send()方法轻松发送。 如果编码类型设置为“multipart / form-data”，它使用与表单相同的格式。

因此，您实际上不必声明表单标记并在其中添加输入，是的，如果您让我们假设您没有表单标记，则会更容易。

问题

你的脚本中的问题是你的formdata是一个json而不是一个FormData()接口对象，它使用formdataObject.append()将一个新值附加到FormData对象内的现有键上，如果不是，则添加该键。已经存在。

请参阅下面的代码，它将email ，文件label和file到PHP页面，而不使用输入的表单标记。

没有

标签

假设你的html看起来像下面没有表格

 Your email address:  
 Custom file label:  
 File to stash:   

您的javascript代码如下所示

 $(document).ready(function () { $("input[name='submit']").on('click', function (event) { event.preventDefault(); //START Append form data var data = new FormData(); data.append( 'userid', $("input[name='userid']").val()); data.append( 'label', $("input[name='filelabel']").val() ); data.append('file', $("input[name='file']")[0].files[0], 'somename.jpg'); //END append form data $.ajax({ type: "POST", url: "file.php", data: data, processData: false, contentType: false, success: function (data) { console.log("SUCCESS : ", data); }, error: function (e) { console.log("ERROR : ", e); } }); }); }); 

而你的file.php将如下所示

当您点击stash file按钮时，这应该显示文件输入并在控制台中将它们都stash file 。

使用

标签

如果您将输入包装在表单标记内，那么您的代码将在以下部分中进行更改

• 更改click事件的绑定以形成submit事件。

• 更改按钮类型以在HTML submit 。

• 获取表单对象。

• 使用表单对象初始化FormData() 。

请参阅下面HTML的外观

 
 Your email address:  
 Custom file label:  
 File to stash:    

你的javascript将如下所示

 $(document).ready(function () { $("form").on('submit', function (event) { event.preventDefault(); var form = this; var data = new FormData(form); $.ajax({ type: "POST", url: "file.php", data: data, processData: false, contentType: false, success: function (data) { console.log("SUCCESS : ", data); }, error: function (e) { console.log("ERROR : ", e); } }); }); }); 

Answer 3

首先在表单中插入输入文件标签并使用enctype =“multipart / formdata”发送图像，否则您将无法发送图像