美文网首页
ajax异步上传图片

ajax异步上传图片

作者: answer6 | 来源:发表于2017-10-25 15:49 被阅读0次
    方法不唯一,这里介绍的是 通过ajaxSubmit来完成 ajax对form表单的提交包括图片,目的是无刷新。

    -formjQ的下载地址 链接:http://pan.baidu.com/s/1dFwALt3 密码:89i9

    <html>  
    <head>  
    <title>Ajax异步上传图片</title>   
    </head>  
    <body>  
       //这里什么都可以不放 下面的option会对号入座 同样option没有的参数会找这边
        <form id="jvForm">
            <table> 
                        <td width="20%"></td>  
                            <input name="pic" type="file" onchange="uploadPic()"/>  
                        </td>  
                    </tr>  
            </table>  
        </form>  
    </body>  
    </html> 
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="./jquery.form.min.js"></script>// 没有这个js会报ajaxsubmit not funtion
    <script type="text/javascript">  
        function uploadPic() {  
            // 上传设置  
            var options = {  
                    url: "./file.php",  
                    type: "post",  
                    success: function(data, status, xhr) {  
                        // // 图片显示地址  
                        // $("#allUrl").attr("src", data.path);  
                    }  
            };  
              
            $("#jvForm").ajaxSubmit(options);  
        }  
    </script>   
    

    file.php

    <?php 
        var_dump( $_REQUEST );
        var_dump( $_FILES );
        var_dump( $_POST );
    ?>
    

    当然可以不用form 直接用base64的方法来传输 开心就好。

    相关文章

      网友评论

          本文标题:ajax异步上传图片

          本文链接:https://www.haomeiwen.com/subject/qkbqpxtx.html