AJAX上传图片

来源：互联网发布：济南java工程师待遇编辑：程序博客网时间：2024/06/10 06:20

ajax上传图片

图片时一般要做下预览,需要分步先提交图片,但一般的ajax提交不能够完成文件的上传,这时我们就需要借助jquery的formData 这一对象来完成文件的上传(引入jquery.form.js).

html代码

<html><head><title>AJAX Upload Image</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.form.js"></script><style>    #imgbox{width:1200px;margin:0 auto;}    #imgbox img{float:left;width:300px;height:300px;}   </style></head><body><div><form id="submit_form" method="post" action="" enctype="multipart/form-data">    <input type="file" name="upload_file" id="upload_file">         <input type="text" name="test_text" id="test_text" value="test">    <input type="submit"  value="确定">           </form><div id="imgbox">    <img src=""  id="imgs" >    </div></div>  <script type="text/javascript">     $("#submit_form").submit(function(){         if($("#upload_file").val()==''){             alert("请选择要上传的文件");             return false;         }        var formData =  new FormData($("#submit_form")[0]);        // console.log(formData);return false;         $.ajax({            debug:true,            url:'upload.php',            type: 'POST',            async: false,            cache: false,            data:formData,            processData: false,            contentType: false,            dataType:"json",            beforeSend: function(){                uploading = true;            },            success : function(data) {                if (data.status == 1) {                    $("#imgs").attr("src", data.src);                } else {                    alert("上传出错");                    return false;                }                uploading = false;            }         })         return false;     })</script></body></html>

php代码(upload.php)

<?php    // var_dump($_POST);    // var_dump($_FILES);    // var_dump($_FILES['upload_file']);if (file_exists("upload/" . $_FILES["upload_file"]["name"])){    // echo $_FILES["file"]["name"] . " already exists. ";    echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;         }else{    $test=move_uploaded_file($_FILES["upload_file"]["tmp_name"],"upload/" . $_FILES["upload_file"]["name"]);    if($test){        echo json_encode(['status'=>1,'src'=>"upload/" . $_FILES["upload_file"]["name"]]);exit;    }else{        echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;         }}

源文件地址:upload_ajax_img
参考文章:
1.http://yunzhu.iteye.com/blog/2177923
2.https://www.cnblogs.com/zzgblog/p/5417969.html
3.http://blog.csdn.net/inuyasha1121/article/details/51915742

阅读全文

0 0