Php 使用jquery上传图像_Php_Jquery_Image Uploading

Php 使用jquery上传图像

php jquery

Php 使用jquery上传图像,php,jquery,image-uploading,Php,Jquery,Image Uploading,我有一个工作php代码上传到数据库中的图像。是否可以将其转换为jquery？如果是，我需要做什么？顺便说一句，我是jquery的新手。谢谢 $("#formupload").on("submit", upload_image); 这段代码运行得很好。但是我需要在jquery中完成它 <form action = 'upload.php' method = 'post' enctype="multipart/form-data"> <input type="file"

我有一个工作php代码上传到数据库中的图像。是否可以将其转换为jquery？如果是，我需要做什么？顺便说一句，我是jquery的新手。谢谢

$("#formupload").on("submit", upload_image);

这段代码运行得很好。但是我需要在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>';                  
        }
    }

$("#formupload").on("submit", upload_image);




您可以通过ajax调用来提交表单。您也可以使用类似的方法：
$("#formupload").on("submit", upload_image);


$("#formupload").on("submit", upload_image);

尽管如此，为了将文件存储在服务器中，您仍然需要使用php代码
您可以调用ajax来提交表单。您也可以使用类似的方法：
<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> 

$("#formupload").on("submit", upload_image);


$("#formupload").on("submit", upload_image);

尽管如此，您仍然需要有php代码才能将文件存储在服务器中
<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> 

$("#formupload").on("submit", upload_image);


JQuery选择器的工作方式非常类似于CSS$（“#formupload”）
选择id为formupload
的元素
on
用于注册事件的处理程序
这里，我们正在为id为formupload
的元素的submit
事件设置一个处理程序（upload\u image函数）

对php脚本进行AJAX调用
$("#formupload").on("submit", upload_image);

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
    });
}

<代码>功能上传\u图像（事件）{
event=event | | window.event；
//防止默认表单操作，即加载新页面
if（event.preventDefault）{//W3C变量
event.preventDefault（）；
}
否则{//IE<9
event.returnValue=false；
}
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：新FormData（$（'#formupload'）[0]），
成功：功能（数据）{
//显示成功消息
},
enctype:“多部分/表单数据”，
processData:false，
contentType:false，
缓存：false
});
}

您可以防止表单提交的默认操作，即加载POST响应，这是函数的前几行正在执行的操作
AJAX调用是使用执行AJAX调用的jQuery实用程序
```
$.AJAX
```
进行的
```
url
```
属性将由PHP脚本的属性填充
由于这是一个文件上载，请将HTTP方法指定为POST
```
data
```
属性是POST请求的有效负载，它是您尝试上载的文件的内容
您可以使用
```
success
```
属性指定成功回调，该属性是完成文件上载时将调用的函数

JQuery选择器的工作方式非常类似于CSS
```
$（“#formupload”）
```
选择id为
```
formupload
```
的元素
```
on
```
用于注册事件的处理程序
这里，我们正在为id为
```
formupload
```
的元素的
```
submit
```
事件设置一个处理程序（upload\u image函数）

对php脚本进行AJAX调用

$("#formupload").on("submit", upload_image);

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
    });
}

函数上传\u图像（事件）{
event=event | | window.event；
//防止默认表单操作，即加载新页面
if（event.preventDefault）{//W3C变量
event.preventDefault（）；
}
否则{//IE<9
event.returnValue=false；
}
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：新FormData（$（'#formupload'）[0]），
成功：功能（数据）{
//显示成功消息
},
enctype:“多部分/表单数据”，
processData:false，
contentType:false，
缓存：false
});
}

您可以防止表单提交的默认操作，即加载POST响应，这是函数的前几行正在执行的操作
AJAX调用是使用执行AJAX调用的jQuery实用程序
```
$.AJAX
```
进行的
```
url
```
属性将由PHP脚本的属性填充
由于这是一个文件上载，请将HTTP方法指定为POST
```
data
```
属性是POST请求的有效负载，它是您尝试上载的文件的内容
您可以使用
```
success
```
属性指定成功回调，该属性是完成文件上载时将调用的函数

您可以尝试jquery插件。例如，Plupload工作得很好，并且具有诸如upload Progress之类的简洁特性。您可以尝试使用jquery插件。例如，Plupload工作得很好，具有上传进度等简洁的功能