欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

自己亲自做的 ajax 上传图像图片 有大用 有大大用 有大大大用

星期一, 2016-09-12 02:26 — adminshiping1


jquery-2.2.4.min.js和jquery.form.js 见 附件

第一例

<script src="<?php echo base_url();?>assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>

<script src="<?php echo base_url();?>assets/js/jquery.form.js" type="text/javascript"></script>

    

$(document).ready(function() {

           function showRequest(formData, jqForm, options) {

                return true;

            }

            function showResponse(responseText, statusText, xhr, $form){

                if(responseText.error!=null && responseText.error!=''){

                    alert(responseText.error);

                }else if(responseText.pic!=null && responseText.pic!=''){


                    $('#bigtu').attr('src',responseText.pic);

                }else{

                    alert('上传有错误')

                }

            };

            var options = {

                type : 'POST',

                beforeSubmit:  showRequest,

                success:       showResponse,

                dataType: 'json'

            };

            $("#uploadfile").change(function(){

                //$('#pingpaiadd').ajaxForm(options).submit();

                $('#pingpaiadd').ajaxSubmit(options);

                return false;

            });

            <form action="<?php print $action;?>" enctype="multipart/form-data" name="pingpaiadd" id="pingpaiadd" method="POST">


            <div class="productdetailtop clearfix">

                <div class="productbigtu">

                    <img id="bigtu" src="<?php print !empty($pic) ? getReferImg($pic,382,573): base_url().'assets/images/zwtupian.jpg'; ?>" alt="" width="382" height="573">

                    <div class="selectpicdiv">

                        <img src="<?php echo base_url();?>assets/images/admin/selectpic.png" alt="">

                        <input type="file" name="pic" class="uploadfile" id="uploadfile">

                    </div>

               

            </ul>

                <br>

            <div class="editorfowm">

                 <textarea name="body" id="editor" style="width:1024px;height:500px;"><?php echo set_value('body',(isset($body))? htmlspecialchars_decode($body):''); ?></textarea>

                <input class="submitbutton" type="submit" name="submit" value="确认提交">



            </form>



下面是php 的接受

    public function write()

    {


        $this->_data['action'] = '/admin/product/write';

        $this->upload_pic();

       // 这里 ajax 接受上传的图片

        if($this->input->is_ajax_request()){

            if($this->_data['ajax_post_pic_success'] === TRUE){

                // $this->session->set_flashdata('pic',$return_upload_pic['data']['pic']);

                $this->session->set_flashdata('full_path',$this->_data['full_path']);

                $data = array('pic'=>$this->_data['pic']);

                echo my_json_encode($data);

                exit;

            }  else if ($this->_data['ajax_post_pic_success'] === FALSE){

                $data = array('error'=>$this->_data['error']);

                echo my_json_encode($data);

                exit;

            }

        }


       

     // 下面是 非 ajax  的(即普通的submit)处理

            $this->_data['id'] = $id;

            $this->_data['title'] = $product['title'];

            $this->_data['subtitle'] = $product['subtitle'];

            $this->_data['pic'] = $product['pic'];

  


        $id = $this->_write_product();

        //redirect('admin/product/write/'.$id,$this->_data);

        redirect('admin/product/write/'.$id);

    }

 



第二例

<html>

<head>

<meta charset="UTF-8">

<title>后台管理-商品管理</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/admin/adminstyle.css" />

<script src="<?php echo base_url();?>assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>

<script src="<?php echo base_url();?>assets/js/jquery.form.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

            $('.mana_pro').click(function(){$('#tuijian').toggle();return false;

            });

function showRequest(formData, jqForm, options) 

                    {

                        var formElement = jqForm[0];

                        if(formElement.pic.value== null || formElement.pic.value==''){

                                        alert('必须选中图像上传');return false;

                    }

                        return true;


            }

                function showResponse(responseText, statusText, xhr, $form){

                    if(responseText.error!=null && responseText.error!=''){

                            alert(responseText.error);

                    }

                            else if(responseText.pic!=null && responseText.pic!=''){$('#showpic img').attr('src',responseText.pic);

                }

                            else{

                                alert('上传有错误')

                    }

            };

                    var options = {

                            type : 'POST',   

                                beforeSubmit:  showRequest,success:       showResponse,

                                dataType: 'json'          

                          };

                        $('.uploadbutton').click(function(){

                                //$('#pingpaiadd').ajaxForm(options).submit();  

                              $('#pingpaiadd').ajaxSubmit(options);return false;

                        });

                        });

});

</script>

</head>

<body>

<div class="adminouter topadminouter">

  <div class="admincommon topadmincommon">

    <h1>结构坊</h1>

    <div><a href="">账号管理</a><a href="">退出</a></div>

  </div>

</div>

<div>

  <div class="admincommon clearfix">

    <?php $this->load->view('admin/leftmenu'); ?>

    <div>

      <div class="logo_ppmc productinfo">

        <div class= "">

          <ul>

            <?php echo validation_errors(); ?> <?php echo (empty($error))?'':'<li>'.$error.'</li>'; ?>

          </ul>

        </div>

        <form action="/admin/pingpai/add" enctype="multipart/form-data" name="pingpaiadd" id="pingpaiadd"  METHOD="POST">

          <input type="hidden" name="p_p_id" value="<?php print  $this->uri->segment(4, 1); ?>">

          <table cellpadding="0" cellspacing="0">

            <tr>

              <td><p>标   题：</p></td>

              <td><div>

                  <input type="text" name="name" value="">

                </div></td>

            </tr>

            <tr></tr>

            <tr>

              <td><p>图像：</p></td>

              <td><div class="fielddiv file-box">

                <input type='text' name='textforpic' id='textforpic' />

                <input type='button' value='浏览...' />

                <input type="file" name="pic" id="fileField" size="28" onChange="document.getElementById('textforpic').value=this.value" />

                <input type="button" name="button" class="browsefile uploadbutton" value="上传" />

            </tr>

            <tr></tr>

            <tr></tr>

            <tr></tr>

          </table>

          <div class="submitdiv clearfix">

            <input type="submit" name="title" value="确认提交">

          </div>

        </form>

        <div id="showpic"><img src="" alt="" width="196" height="106"></div>

      </div>

      <div>

        <ul class="pplistul clearfix">

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

          <li><img src="<?php echo base_url();?>assets/images/admin/tubiao.jpg" alt="">

            <p>拉斯维加斯</p>

            <div><a href="">删除品牌</a><a href="">管理商品</a></div>

          </li>

        </ul>

      </div>

    </div>

  </div>

</div>

<div id="tuijian" style="display: none;">

  <div>

    <div>

      <div><a href=""><img src="<?php echo base_url();?>assets/images/admin/close.png" alt=""></a></div>

      <ul class="tjtab clearfix">

        <li><a href="">男装系列</a></li>

        <li><a href="">女装系列</a></li>

        <li><a href="">旗袍系列</a></li>

      </ul>

      <div class="tjbody clearfix">

        <ul>

          <li>

            <ul>

              <li><a href="#">男装系列</a>

                <ul>

                  <li><a href="#">商务套西</a></li>

                  <li><a href="#">礼服套西</a></li>

                  <li><a href="#">长袖衬衣</a></li>

                  <li><a href="#">短袖衬衣</a></li>

                  <li><a href="#">易打理衬衣</a></li>

                  <li><a href="#">丹宁衬衣</a></li>

                  <li><a href="#">休闲西装</a></li>

                  <li><a href="#">西裤</a></li>

                  <li><a href="#">休闲裤</a></li>

                  <li><a href="#">羊绒衫</a></li>

                  <li><a href="#">大衣</a></li>

                  <li><a href="#">马甲</a></li>

                  <li><a href="#">牛仔裤</a></li>

                </ul>

              </li>

              <li><a href="#">女装系列</a>

                <ul>

                  <li><a href="#">套装</a></li>

                  <li><a href="#">衬衣</a></li>

                  <li><a href="#">羊绒衫</a></li>

                  <li><a href="#">大衣</a></li>

                  <li><a href="#">牛仔裤</a></li>

                </ul>

              </li>

              <li><a href="#">旗袍系列</a>

                <ul>

                  <li><a href="#">套装</a></li>

                  <li><a href="#">衬衣</a></li>

                  <li><a href="#">羊绒衫</a></li>

                  <li><a href="#">大衣</a></li>

                  <li><a href="#">牛仔裤</a></li>

                </ul>

              </li>

            </ul>

          </li>

        </ul>

        <div>

          <ul class="adminproductlistul clearfix">

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

            <li>

              <div><a href=""  title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品"><img src="<?php echo base_url();?>assets/images/admin/oneproduct.jpg" alt=""></a>

                <p>

                  <input type="checkbox">

                  <a href="" title="韩国网购-100%正品韩国网购-100%正品韩国网购-100%正品">韩国网购韩国网....</a></p>

              </div>

            </li>

          </ul>

          <div class="pl_pg clearfix">

            <ul class="pages clearfix">

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

              <li><a href="">1</a></li>

              <li><a href="">2</a></li>

              <li><a href="">3</a></li>

              <li><a href="">4</a></li>

            </ul>

            <a href="">确定</a></div>

        </div>

      </div>

    </div>

  </div>

</div>

<footer>

  <div><br>

    <br>

  </div>

</footer>

</body>

</html>








 下面是另一种方法

  1. $("#ok").click(function() {  

  2.           

  3.         $("#gp").ajaxSubmit({  

  4.             url : "xxx.action?action=saveOrUpdateObject",  

  5.             type : "post",  

  6.             dataType : 'json',  

  7.             success : function(data) {  

  8.                 alert("设置成功！");  

  9.             },  

  10.             error : function(data) {  

  11.                 alert("error:" + data.responseText);  

  12.             }  

  13.         });  

  14.     });  

大概jsp代码：

[html] view plain copy 

  1. <form id="gp" method="post" enctype="multipart/form-data">  

  2. <input type="text" name="" id="" />  

  3. <input type="file" name="" id="" accept="image/*"/>  

  4. <input type="button" id="ok" value="保存" />  

  5. </form>  


附件大小
Package icon jquery-2.2.4.min.js和jquery.form.js40.92 KB
普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2