国产成人精品日本亚洲,亚洲日本va中文字幕,久久综合久色欧美综合狠狠

^{<center id="zsehi"></center>}

首頁(yè) > 博客列表 > 利用所學(xué)知識(shí)實(shí)現(xiàn)Ajax+PHP異步多圖片上傳

博主信息

博文 42

粉絲 3

評(píng)論 2

訪問(wèn)量 47159

專題推薦

更多>

相關(guān)推薦

實(shí)例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax+PHP實(shí)現(xiàn)異步多圖片上傳</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style type="text/css">
        /* 圖片返回樣式 */
        #back{
            height: auto;
            text-align: center;
            min-height: 100px;
            border: 1px solid silver;
            border-radius: 3px;
        }
        #back img{
            margin:3px 10px;
            border: 1px solid silver;
            border-radius:3px;
            padding: 6px;
            width: 200px;
            height: 120px;
        }
        #back p{
            font-family: "微軟雅黑";
            line-height: 120px;
            color: #ccc;
        }
        .file {
            position: relative;
            display: inline-block;
            background-color:#1ab294;
            border-radius: 4px;
            padding: 8px 16px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            }
        .file:hover {
            background-color:#e37c02;
        }
            .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            }
            .box{
            margin-top: 10px;
            text-align: center;
            }
            .box a{
            margin-left: 10px;
            }
    </style>
</head>
<body>
    <!-- 響應(yīng)返回?cái)?shù)據(jù)容器 -->
    <div id="back">
    </div>
        <div class="box">
            <a href="javascript:;" class="file">選擇圖片
                <input type="file" multiple="multiple" id="inputfile" name="" class="photo">
            </a>
            <a href="javascript:;" class="file close">重新選擇
                <input type="buttom" class="photo">
            </a>
        </div>
<script type="text/javascript">
$(document).ready(function(){
    //響應(yīng)文件添加成功事件
    var back = $("#back");
    $("#inputfile").change(function(){
    if (back.children('img').length>19) { //設(shè)置圖片數(shù)量
        alert("最多只能選擇20張圖片");
        return false;
    }
        //創(chuàng)建FormData對(duì)象
        var data = new FormData();
        //為FormData對(duì)象添加數(shù)據(jù)
        $.each($('#inputfile')[0].files, function(i, file) {
            data.append('upload_file'+i, file);
        });
        $(".loading").show();    //顯示加載圖片
        //發(fā)送數(shù)據(jù)
        $.ajax({
            url:'demo.php', /*php處理文件*/
            type:'POST',  /*提交方式*/
            data:data,
            cache: false,
            contentType: false,        /*不可缺*/
            processData: false,         /*不可缺*/
            success:function(data){
                data = $(data).html();        /*轉(zhuǎn)格式*/


                if($("#back").children('img').length == 0)
                {
                 $("#back").append(data.replace(/</g,'<').replace(/>/g,'>'));
                }
                else{
                    $("#back").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));
                }
            },
            error:function(){
                alert('上傳出錯(cuò)');
            }
        });
    });
    $(".close").on("click",function(){
        $("#back").empty();
    });
});
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

PHP代碼

實(shí)例

<?php
    header('content-type:text/html charset:utf-8');
    $dir_base = "upload/";     //文件上傳根目錄
    //沒(méi)有成功上傳文件，報(bào)錯(cuò)并退出。
    $output = "<textarea>";
    $index = 0;        //$_FILES 以文件name為數(shù)組下標(biāo)，不適用foreach($_FILES as $index=>$file)
    foreach($_FILES as $file){
        $upload_file_name = 'upload_file' . $index;        //對(duì)應(yīng)index.html FomData中的文件命名
        $filename = $_FILES[$upload_file_name]['name'];
        $gb_filename = iconv('utf-8','gb2312',$filename);    //名字轉(zhuǎn)換成gb2312處理
        //文件不存在才上傳
        if(!file_exists($dir_base.$gb_filename)) {
            $isMoved = false;  //默認(rèn)上傳失敗
            $MAXIMUM_FILESIZE = 1 * 1024 * 1024;     //文件大小限制    1M = 1 * 1024 * 1024 B;
            $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";
            if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE &&
                preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
                $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上傳文件
            }
        }else{
            $isMoved = true;    //已存在文件設(shè)置為上傳成功
        }
        if($isMoved){
            //輸出圖片文件<img>標(biāo)簽
            //注：在一些系統(tǒng)src可能需要urlencode處理，發(fā)現(xiàn)圖片無(wú)法顯示，
            //請(qǐng)嘗試 urlencode($gb_filename) 或 urlencode($filename)，不行請(qǐng)查看HTML中顯示的src并酌情解決。
            $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";
        }else {
            //上傳失敗則把error.jpg傳回給前端
            $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
        }
        $index++;
    }
    echo $output."</textarea>";

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

參考網(wǎng)站：

http://ipnx.cn/php-weizijiaocheng-376770.html

http://www.phpchina.com/portal.php?mod=view&aid=40648

完成之后感覺(jué)很興奮，實(shí)現(xiàn)過(guò)程中對(duì)前端的知識(shí)進(jìn)行了大量的回顧，有一部分代碼是直接復(fù)制過(guò)來(lái)的，只是稍微查了一下基本用法。

批改狀態(tài)：合格

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

純css絲帶導(dǎo)航

2018-05-06 22:38:20

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例

實(shí)例