• jquery+php ajax上传多图片即时显示


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>问卷列表</title>
        <link href="<!--{$csspath}-->/basc.css" rel="stylesheet" type="text/css"/>
        <link href="<!--{$csspath}-->/styleG.css" rel="stylesheet" type="text/css"/>
        <script src="<!--{$jspath}-->/jquery-1.7.2.js"></script>
        <!--  artdialog插件  -->
        <script src="<!--{$jspath}-->/artDialog4.1.6/jquery.artDialog.source.js?skin=blue"></script>
        <script src="<!--{$jspath}-->/artDialog4.1.6/plugins/iframeTools.source.js"></script>
        <script src="<!--{$jspath}-->/admin.js"></script>
    
        <!--layer-->
        <link rel="stylesheet" href="<!--{$jspath}-->/layer/skin/default/layer.css">
        <script src="<!--{$jspath}-->/layer/layer.js"></script>
    
    </head>
    <body>
    <style>
        table th{padding-left: 100px!important;  245px;}
    
    </style>
    <div class="pubBox">
        <form action="" method='post' id="batch-form">
        <div class="pubtabBox">
            <div class="TabBoxT">
                <dl class="navTab">
                    <dt  class="on"><a href="#" >用户信息</a></dt>
                </dl>
            </div>
            <div class="TabBoxC">
    
                <div>
                    <div class="pubTabel">
                        <table class="tabelLR">
                            <tr>
                                <th > 用户名:</th>
                                <td>
                                    <input type="text" name="username" value="<!--{$info.username}-->" style=" 300px;">
                                </td>
                            </tr>
                            <tr>
                                <th > 新密码:</th>
                                <td>
                                    <input type="password" name="password" style=" 300px;">
                                </td>
                            </tr>
                            <tr>
                                <th > 重复密码:</th>
                                <td>
                                    <input type="password" name="password" style=" 300px;">
                                </td>
                            </tr>
    
    
                        </table>
                    </div>
    
                </div>
            </div>
        </div>
    
            <div class="pubtabBox" style="margin-top: 10px;">
                <div class="TabBoxT">
                    <dl class="navTab">
                        <dt  class="on"><a href="#" >企业信息</a></dt>
                    </dl>
                </div>
                <div class="TabBoxC">
                    <div>
                        <div class="pubTabel">
                            <table class="tabelLR">
                                <tr>
                                    <th > 注册号:</th>
                                    <td>
                                        <input type="text" name="registration_number" value="<!--{$info.registration_number}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 组织机构代码:</th>
                                    <td>
                                        <input type="text" name="organization_code" value="<!--{$info.organization_code}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 税务登记号:</th>
                                    <td>
                                        <input type="text" name="tax_code" value="<!--{$info.tax_code}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 营业执照(三证合一):</th>
                                    <td>
                                        <img src="/static/uploadfile/1.jpg" alt="" width="200" class="license_up">
                                        <p>
                                            <input class="files" id="license_up" name="license_up" type="file"/>
                                            <input type="text" name="license" class="license_up_val">
    
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="pubtabBox" style="margin-top: 10px;">
                <div class="TabBoxT">
                    <dl class="navTab">
                        <dt  class="on"><a href="#" >法定代表人信息</a></dt>
                    </dl>
                </div>
                <div class="TabBoxC">
                    <div>
                        <div class="pubTabel">
                            <table class="tabelLR">
                                <tr>
                                    <th > 法定代表人归属地:</th>
                                    <td>
                                        <input type="text" name="person_address" value="<!--{$info.person_address}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 法定代表人姓名:</th>
                                    <td>
                                        <input type="text" name="person_name" value="<!--{$info.person_name}-->" style=" 300px;">
                                    </td>
                                </tr>
    
                                <tr>
                                    <th > 法人身份证照片:</th>
                                    <td>
                                        <img src="/static/uploadfile/1.jpg" alt="" width="200" class="card_1_up">
                                        <p>
                                            <input class="files" id="card_1_up" name="card_1_up" type="file"/>
                                            <input type="text" name="card_1" class="card_1_up_val">
                                        </p>
                                        <p>身份证正面</p><br>
    
                                        <img src="/static/uploadfile/2.jpg" alt="" width="200" class="card_2_up">
                                        <p>
                                            <input class="files" id="card_2_up" name="card_2_up" type="file"/>
                                            <input type="text" name="card_2" class="card_2_up_val">
                                        </p>
                                        <p>身份证反面</p><br>
                                    </td>
                                </tr>
                            </table>
                        </div>
    
                    </div>
                </div>
            </div>
    
            <div class="pubtabBox" style="margin-top: 10px;">
                <div class="TabBoxT">
                    <dl class="navTab">
                        <dt  class="on"><a href="#" >申请人信息</a></dt>
                    </dl>
                </div>
                <div class="TabBoxC">
                    <div>
                        <div class="pubTabel">
                            <table class="tabelLR">
                                <tr>
                                    <th > 姓名:</th>
                                    <td>
                                        <input type="text" name="apply_name" value="<!--{$info.apply_name}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 身份证号码:</th>
                                    <td>
                                        <input type="text" name="apply_id" value="<!--{$info.apply_id}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 手机号:</th>
                                    <td>
                                        <input type="text" name="apply_phone" value="<!--{$info.apply_phone}-->" style=" 300px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th > 邮箱:</th>
                                    <td>
                                        <input type="text" name="apply_email" value="<!--{$info.apply_email}-->" style=" 300px;">
                                    </td>
                                </tr>
    
                                <tr>
                                    <th > 申请人身份证照片:</th>
                                    <td>
                                        <img src="/static/uploadfile/1.jpg" alt="" width="200" class="apply_card_1_up">
                                        <p>
                                            <input class="files" id="apply_card_1_up" name="apply_card_1_up" type="file"/>
                                            <input type="text" name="apply_card_1" class="apply_card_1_up_val">
                                        </p>
                                        <p>身份证正面</p><br>
    
                                        <img src="/static/uploadfile/2.jpg" alt="" width="200" class="apply_card_2_up">
                                        <p>
                                            <input class="files" id="apply_card_2_up" name="apply_card_2_up" type="file"/>
                                            <input type="text" name="apply_card_2" class="apply_card_2_up_val">
                                        </p>
                                        <p>身份证反面</p><br>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="pubTabelBot">
                            <input type="submit" hidefocus="hide" value="确定" class="btn1"><input type="button" hidefocus="hide" value="取消" class="btn2" onclick="javascript:history.back();">
                        </div>
                        <div class="pubTabelBot">
                            <div class="pageGo"><!--{$pageStr}--></div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    
    </div>
    </body>
    </html>
    
    <script src="https://www.helloweba.com/demo/ajaxsubmit/jquery.form.min.js" type="text/javascript"></script>
    
    <!--上传js-->
    <script src="<!--{$jspath}-->/member_update.js"></script>
    
    <script type="text/javascript">
    
    </script>
    

      member_update.js 文件:

    $(function () {
        to1('license_up', 'up1');
        to1('card_1_up', 'up2');
        to1('card_2_up', 'up3');
        to1('apply_card_1_up', 'up4');
        to1('apply_card_2_up', 'up5');
    });
    
    
    function to1(id, up)
    {
        $('#'+id).wrap("<form id="+up+" action='/admin/question/grade/member_update' method='post' enctype='multipart/form-data'></form>");
        $('#'+id).change(function(){
            $('#'+up).ajaxSubmit({
                dataType:  'json',
                beforeSend: function() {
                    layer.load(2);
                },
                success: function(data) {
                    if(data.status == 0) {
                        $('.'+id).attr('src', data.path);
                        $('.'+id+'_val').attr('value', data.path);
                        alert('succees');
                        layer.closeAll();
                    }else{
                        alert(data.data);
                        layer.closeAll();
                    }
                    return false;
                }
            });
        });
    }
    

      php访问方法:

     public function member_updateAction()
        {
            if(isPost() && $_FILES){
                $file = $_FILES['file']['tmp_name'];
                $name = array_keys($_FILES); // 自动获取上传的name
    
                Load::load_class('fileupload',DIR_BF_ROOT.'classes',0);
                $up = new fileupload;
                $up -> set("path", DIR_ROOT . '../static/uploadfile/grade');
                $up -> set("maxsize", 200000000);
                $up -> set("allowtype", array("gif", "png", "jpg","jpeg"));
                if($up -> upload($name[0])) {
                    // 获取上传后的文件名称
                    $file_path =  '/static/uploadfile/grade/'.$up->getFileName();
                    echo json_encode(array('status' => 0, 'name' => $name[0], 'path' => $file_path));exit();
                } else {
                    echo json_encode(array('statsu' => 1, 'data' => $up->getErrorMsg()));exit();
                }
            }
            $this->display('question/grade/member_update');
        }
    

      

  • 相关阅读:
    PHP全栈学习笔记3
    PHP全栈学习笔记3
    JavaScript基础系列
    JavaScript基础系列
    Java语言
    Java语言
    HTML基础系列
    HTML基础系列
    PHP全栈从入门到精通1
    PHP全栈从入门到精通1
  • 原文地址:https://www.cnblogs.com/photo520/p/8670000.html
Copyright © 2020-2023  润新知