如何使用$.ajax()上载文件
How to use $.ajax() to Upload Files
当我尝试使用$_FILES获取图像名称时,会收到此消息。
注意:未定义的索引:C:''examplep''htdocs''upload_form''upload_query.php中10
行的图像
我有一个表单,它将有关图像的信息上传到mysql数据库(phpmyadmin),然后使用JavaScript清除该表单,以便用户可以上传另一个图像和信息。我读到你不能使用$_FILES和JavaScript,但我不确定为什么,我也很感激一个解决方案。
我是php和JavaScript的新手。
这就是JavaScript。
$('form').on('submit',function() {
var that= $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index,value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response){
console.log(response);
}
});
document.getElementById("upload_form").reset();
return false;
});
这是php。
//image properties
$name = $_FILES['image']['name'];
$size = $_FILES['image']['size'];
$temp = $_FILES['image']['tmp_name'];
$error = $_FILES['image']['error'];
$type = $_FILES['image']['type'];
//****************
这是表单的一部分。
<form action='upload_query.php' class='appnitro' enctype='multipart/form-data' id='upload_form' method='post' name='upload_form'>
<ul>
<li id='li_1'>
<label class='description' for='image'>Upload a Picture</label>
<div>
<input class='element file' id='image' name='image' required="" type='file'>
</div>
</li>
<li id='li_2'><label class='description' for='name'>Name</label> <span><input class='element text' id='first_name' maxlength='255' name='first_name' placeholder='First Name.' required="" size='12' value=''></span> <span><input class='element text' id='last_name' maxlength='255' name='last_name' placeholder='Last Name.' required="" size='18' value=''></span></li>
</ul>
</form>
等等。
是的,你可以使用$.ajax
上传文件
首先,让我们有一个带有id的典型表单。这个表单可以根据您的意愿包含一个或多个文件。
<form id='fileupload' method='post' enctype="multipart/form-data" ...
然后在jQuery中执行以下操作。
$('#btnupload').click(function () {
//the key is FormData object
var formData = new FormData(document.getElementById('fileupload'));
$.ajax({
url: 'upload.php', //server script to process data
type: 'POST',
success: function (json) {}
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false
});
});
这里的关键是使用javascript FormData对象来构造$.ajax
的数据参数
您不能使用AJAX发送文件(不是这样)。
如果要发送文件,请查看XMLHttpRequest2。非常好的教程在这里-http://www.html5rocks.com/en/tutorials/file/xhr2/
相关文章:
- 通过CSV文件上载更新数据库表
- 带有凭据的角度文件上载(CORS)不起作用
- 使用AJAX将文件上载到服务器
- 需要帮助处理XML HTTP文件上载请求
- 使用Javascript中的Dropbox Core API将文件上载到Dropbox
- JQuery文件上载未检测到动态添加的输入
- 通过将文件上载到ASHX处理程序来实现SSE(服务器发送的事件)
- 将 FormData 对象放入数组中以从不同的输入文件上载文件
- 恢复连接后上载文件
- 在react native中通过PUT方法上载文件
- 钛HTTPCLIENT可以't上载文件
- AJAX POST函数未上载文件
- 使用Angular上载文件时,HttpPostedFileBase为null
- 文件输入更改时正在上载文件
- PhoneGap Ajax上载文件
- 如何使用$.ajax()上载文件
- 上载文件,但不能在表单中上载
- 正在使用getElementByClassName上载文件
- 通过本地文件路径上载文件
- 无法使用bootstrapValidator Ajax上载文件