ajax异步上传图片

方法不唯一,这里介绍的是 通过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的方法来传输 开心就好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、HTTP服务 1.1 C/S和B/S B/S架构:即Broswer、Server,将所有的服务都可以通过浏览器...
    福尔摩鸡阅读 751评论 0 4
  • Ajax的基本概念及使用 同步&异步 同步:必须等待前面的任务完成,才能继续后面的任务; 异步:不受当前主要任务的...
    magic_pill阅读 2,079评论 0 5
  • 生命时光短暂,容不得你浪费,可现在的所作所为,是在珍惜光阴吗?看着一个个年轻的面孔在自己身旁路过,享受着那高大上的...
    cc08阅读 184评论 0 0
  • 文/小妮 最近在学习画漫画,很喜欢漫画老师分享的人生体验: 在年轻的时候,灵感真的很点燃生命,可是慢慢成长,灵感开...
    小妮emily阅读 1,656评论 0 0

友情链接更多精彩内容