php + html5 + ajax 异步上传图片

话不多说,直接上代码

1,htm代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.11.0.js"></script>

</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
      action="/index/fileupsend" method="post"
      enctype="multipart/form-data">

    选择文件:<input type="file" id="file1" /><br />
    <input type="button" id="upload" value="上传" />
    <span id="imgWait"></span>
</form>
<script>
    $(function () {
        $("#upload").click(function () {
            $("#imgWait").html("上传中");
            var formData = new FormData();
            formData.append("myfile", document.getElementById("file1").files[0]);
            $.ajax({
                url: "/Home/index/fileupsend",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                   if(data){
                        alert("上传成功!");
                   }
                    $("#imgWait").html("上传成功");

                },
                error: function () {
                    alert("上传失败!");
                    $("#imgWait").hide();
                }
            });
        });
    });
</script>
</body>
</html>
2,php代码

public function fileupsend(){
    $type_pic = $this->file_upload('1',array('jpg', 'gif', 'png', 'jpeg'),'filetest','myfile');
    echo $type_pic['img_path'];

}
就这样实现了ajax异步提交图片

发布了12 篇原创文章 · 获赞 13 · 访问量 2万+
展开阅读全文

<请教>直接使用Ajax来拼接html页面,这样的做法有什么优劣,可行么?

02-18

例如: ``` $.ajax({ url:"http://"+host+"/cicro/notice_front/load_page.do", type:"post", data:{"page":0}, dataType:"json", async:false, success:function(result){ $('#news_box').empty(); $('#news_box').append('<div class="news comWidth"><div class="news_top"><div class="news_top_top"><img class="news_top_left fl" src="../images/main_titles2.jpg" width="360" height="75"><p class="news_top_right fr"><img src="../images/hzhb04.png">当前位置:<a href="../cicro_fore/index.html">首页</a><img src="../images/hzhb04.png">通知公告</p></div></div><!-- 公告列表 --><div class="news_list" id="news_list"></div><div id="pageGro" class="cb"></div></div>'); var count = 1; for(i = 0; i < result.data.length; i++){ var s = result.data[i]; var content = s.content; var title = s.title; var createtime = s.createtime.substring(0, 19); var p=s.state; if(p==1){ var str="未发布" }else{ str="已发布"; } $('.news_list').append('<a href="javascript:go('+s.id+');" class="title"><div class="news_content"><img src="../images/hzhb04.png">' +title+'<i>'+createtime+'</i></div></a>'); } var j; var nowPage=0;//当前页 var listNum=10;//每页显数 var PagesLen;//总页数 var PageNum=4;//分页链接接数(5个) var count=result.count; PagesLen=Math.ceil(count/listNum); //分页链接变换 strS='<a style="margin:0 3px;font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage(0)">首页</a> ' ; var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2) var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1 var strC="",startPage,endPage; if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1} else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页 else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t} for (var i=startPage;i<=endPage;i++){ if (i==nowPage) strC+='<a href="###" style="color:white;margin:0 3px;font-weight:700;font-size:14px;padding:4px 8px;border:1px solid #3c90d9;background-color:#3c90d9;" onclick="upPage('+i+')">'+(i+1)+'</a> ' else strC+='<a style="font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> ' } strE=' <a style="margin:0 3px;font-size:14px;margin:0 3px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> ' strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条" document.getElementById("pageGro").innerHTML=strS+strC+strE }, error:function(){alert("服务器异常.");} }); ``` 问答

解析从html到ajax的返回数据

06-15

<div class="post-text" itemprop="text"> <p>I have some problem with the returned value of ajax.</p> <p>this is the ajax code: </p> <pre><code>$(document).ready(function() { var request; $("#flog").submit(function(event) { if(request) request.abort(); event.preventDefault(); var form = $(this); var serializedData = form.serialize(); var btnname = $('#log').attr('name'); var btnval = $('#log').val(); var btn = '&'+btnname+'='+btnval; serializedData += btn; request = $.ajax({ type: form.attr('method'), url: form.attr('action'), data: serializedData, }); request.done(function(data, status, jdXHR) { alert(data); }); request.fail(function(jdXHR, status, error) { }); }); }); </code></pre> <p>it takes data from a form and send it to another page.</p> <p>this is the second page: </p> <pre><code><?php include 'head.php'; ?> <?php if($_POST['login']) { session_regenerate_id(true); $con = mysqli_connect("localhost", "Alessandro", "ciao", "freetime") or die('Could not connect: ' . mysqli_error($con)); $query = 'SELECT * FROM users WHERE username="' . $_POST['user'] . '"'; $result = mysqli_query($con, $query) or die('Query failed: ' . mysqli_error($con)); if(mysqli_num_rows($result) == 0) { mysqli_close($con); session_unset(); session_destroy(); $res = false; return $res; } $query = 'SELECT password FROM users WHERE username="' . $_POST['user'] . '"'; $result = mysqli_query($con, $query) or die('Query failed: ' . mysqli_error($con)); $line = mysqli_fetch_array($result, MYSQL_ASSOC); if(md5($_POST['password']) != $line['password']) { mysqli_close($con); session_unset(); session_destroy(); return false; } ?> <?php include 'foot.php'; ?> </code></pre> <p>and in .done the returned data is all the html page. How can I retrieve only a data, like $res? I tried with json_encode() but with no results. If in the second page I delete the lines include 'head.php' and include 'foot.php' it works. But I need that the secon page is html, too. Somenone can help me?</p> </div> 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览