总结：ajax上传图片有几种方式 -php+ajax上传文件

最新推荐文章于 2024-04-20 03:39:57 发布

名称正在更新……

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量524

点赞数

分类专栏： JQUERY php

本文链接：https://blog.csdn.net/qq_39418742/article/details/99610064

版权

php 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

JQUERY

10 篇文章 0 订阅

订阅专栏

第一种：直接利用jquery $.ajax上传

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>

<form  enctype="multipart/form-data">	
<input type="file" name="myfile" id="fileid">

//第三种方法使用按钮
<input type="button" value="tijiao" id="filesubmit">

</form>
<script src="/static/jquery.2.1.1.min.js"></script>
<script src="/static/ajax_file_upload.js"></script>	
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js
"></script>	
<script>
$("#fileid").change(function(){
filedata=new FormData();//必须
filedata.append('filearr',$("#fileid")[0].files[0]);//必须
$.ajax({
            url: "{:url('uploads')}", //用于文件上传的服务器端请求地址
            dataType: 'json', //返回值类型 一般设置为json
            type: 'post',
            data:filedata,
            async:false,//必须
            contentType:false,//必须
            processData:false,//必须
            //cache:false,
           
            success: function (data, status)  //服务器成功响应处理函数
            {
                console.log(data)
               // return;
                // if (typeof (data.error) != 'undefined') {
                //     if (data.error != '') {
                //         alert(data.error);
                //     } else {
                //         alert(data.msg);
                //     }
                // }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        }
    );
    return false;
})


</script>	

</body>
</html>

//说明php后端接受的数据$_FILES['filearr']

第二种：利用 ajax_file_upload $.ajaxFileUpload上传

<script>
$("#fileid").change(function(){
$.ajaxFileUpload({
            url: "{:url('uploads')}", //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'fileid', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            type: 'post',
            success: function (data, status)  //服务器成功响应处理函数
            {
                console.log(data)
                return;
                // if (typeof (data.error) != 'undefined') {
                //     if (data.error != '') {
                //         alert(data.error);
                //     } else {
                //         alert(data.msg);
                //     }
                // }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        }
    );
    return false;
})


</script>

第三种：利用jquery.form.js ajaxForm或ajaxSubmit上传

<script>

$(function(){

var abc={
//url:"{:url('upl')}",　　　　　　//form提交数据的地址
type:'post',　　　  //form提交的方式(method:post/get)
beforeSerialize:function(){}, //序列化提交数据之前的回调函数
beforeSubmit:function(){},　　//提交前执行的回调函数
success:function(data){ console.log(data)}
};

 //第一种提交方式：
 $("form").ajaxform(abc);按钮type必须submit



//第二种提交方式：
 $("#filesubmit").click(function(){//按钮type，button或submit都可
 	 $("form").ajaxSubmit(abc);
 	 return false;
 })


/*ajaxForm执行的时候其实相当于

 $("form").submit(function(){
            $(this).ajaxSubmit();
            return false;        //此句解释了为什么ajaxForm会自动提交表单，想要阻止自动提交，必须return false；
        })*/


})
</script>

其实还有多种方式，在这里就介绍三种常用的ajax上传方法，后端上传方法就不在此说明了，童鞋们，可以自己逐一试试呢！

希望对你的学习有帮助！

名称正在更新……

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
总结：ajax上传图片有几种方式 -php+ajax上传文件

第一种：直接利用jquery $.ajax上传<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><form enctype="m...
复制链接

扫一扫