利用jquery插件jquery.form.js异步上传图片

最新推荐文章于 2021-03-25 20:02:56 发布

代码一天不写我浑森蓝廋

最新推荐文章于 2021-03-25 20:02:56 发布

阅读量790

点赞数

分类专栏： JavaScript PHP Html/Css

本文链接：https://blog.csdn.net/zhang197093/article/details/50670776

版权

PHP 同时被 3 个专栏收录

46 篇文章 3 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

Html/Css

8 篇文章 0 订阅

订阅专栏

jquery.form.js是一款用于异步提交表单的插件，使用起来非常的方便，当然也可以用来异步上传图片，有些场合可以用来替代uploadify等flash插件，更加的轻量级。

基本使用方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.form.js"></script>
    <title></title>
</head>
<body>

<form id="myForm" action="?" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="button" value="确定" />
</form>

<script>
    $(function(){
        $(document).on('click', 'input[type="button"]', function(){
            $('#myForm').ajaxSubmit();
        })
    })
</script>

</body>
</html>

异步上传图片代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.form.js"></script>
    <title>异步上传图片实例</title>
</head>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="mypic">
    <button type="button" id="upbtn">上传</button>
</form>

<script>
    $(function(){
        $('#upbtn').click(function(){
            $('form').ajaxSubmit({
                dataType : 'JSON',
                success : function(rt){
                    if(rt.err_code > 0){
                        alert(rt.msg);
                        return ;
                    }else{
                        $('<img/>').attr({'src':rt.data, width : 80, heiht : 80}).insertAfter($('input[type="file"]'));
                    }
                }
            })
        });
    });
</script>
</body>
</html>

后端代码：

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/2/17
 * Time: 22:11
 */

if($_FILES['mypic']['error'] == 0){
    if(!is_dir('./images')){
        mkdir('./images');
    }
    $filename = date('YmdHis') . '.' . pathinfo($_FILES['mypic']['name'], PATHINFO_EXTENSION);

    if(move_uploaded_file($_FILES['mypic']['tmp_name'], './images/' . $filename)){
        echo json_encode(array('err_code' => 0, 'data' => '/images/' . $filename));
    }else{
        echo json_encode(array('err_code' => 1, 'msg' => '上传失败'));
    }
}

运行效果：