使用jQuery上传图像 [英] Upload image using jquery
本文介绍了使用jQuery上传图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个有效的php代码,可将图像上传到数据库中.是否可以将其转换为jquery?如果是这样,我该怎么办?我是jQuery btw的新手.谢谢
I have a working php code to upload image in the database. Is it Possible to transform it to jquery? If so, what do I need to do? I am new to jquery btw. Thanks
此代码可以正常工作.但是我需要在jquery中做到这一点.
This code works just fine. But I need to do it in jquery.
<form action = 'upload.php' method = 'post' enctype="multipart/form-data">
<input type="file" name="image" > <br>
<input type= 'submit' value = 'Add' id = 'Add' name = 'Add'>
</form>
<?php
if(isset($_FILES['image']))
{
$target_Path = "images/";
$target_Path = $target_Path.basename($_FILES['image']['name'] );
move_uploaded_file( $_FILES['image']['tmp_name'], $target_Path );
$name = $_FILES['image']['name'];
}
if(isset($_POST['Add']))
{
if($_POST["Add"] == "Add")
{
$add = "Insert Into img(path) Values('$name')";
$up = mysql_query($add);
$status = "Upload success!";
print '<script type="text/javascript">';
print 'alert(" '.$status.' ")';
print '</script>';
}
}
推荐答案
<form action='upload.php' method='post' enctype="multipart/form-data" id="formupload">
<input type="file" name="image"/> <br>
<input type='submit' value='Add' id='Add' name='Add/>
</form>
-
您需要首先为表单的Submit事件设置一个回调.
You need to first setup a callback for the submit event of the form.
$("#formupload").on("submit", upload_image);
- jQuery选择器的工作原理与CSS类似;
$("#formupload")
选择ID为formupload
的元素. -
on
用于注册事件的处理程序. - 在这里,我们正在为id为
formupload
的元素的submit
事件设置处理程序(upload_image函数). - JQuery selectors work a lot like CSS;
$("#formupload")
selects the element whose id isformupload
. on
is used to register a handler for an event.- Here, we are setting up a handler(the upload_image function) for the
submit
event of the element whose id isformupload
.
对php脚本进行AJAX调用.
Make an AJAX call to the php script.
function upload_image(event){
event = event || window.event;
// Prevent the default form action i.e. loading of a new page
if(event.preventDefault){ // W3C Variant
event.preventDefault();
}
else{ // IE < 9
event.returnValue = false;
}
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData($('#formupload')[0]),
success : function(data){
// Show success message
},
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false
});
}
- 您可以阻止表单提交的默认操作,即加载POST响应,这是该函数的前几行正在执行的操作.
- 使用
$.ajax
进行AJAX调用,这是用于执行AJAX调用的jQuery实用工具. -
url
属性由您的PHP脚本填充. - 由于它是文件上传,因此将HTTP方法指定为POST.
-
data
属性是POST请求的有效负载,它是您尝试上传的文件的内容. - 您可以使用
success
属性指定成功回调,该属性将在文件上传完成后调用. - You can prevent the default action of form submission, which is to load the POST response, which is what the first few lines of the function is doing.
- An AJAX call is made using
$.ajax
which is the jQuery utility for performing an AJAX call. - The
url
property is to be filled by that of your PHP script. - Since it is a file upload, specify the HTTP method as POST.
- The
data
property is the payload of the POST request, which is the content of the file you are trying to upload. - You can specify the success callback using the
success
property, which is the function that will be called on completion of the file upload.
这篇关于使用jQuery上传图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文