zoukankan      html  css  js  c++  java
  • CI框架结合jQuery实现上传多张图片即时显示

    一、Html代码如下:

     <tr>
        <td class="txt_r"><span class="orange">* </span>上传图片:</td>
            <td id="picInput">
                <form id="upload_form"  method="post" enctype="multipart/form-data" style="" action="/admin/upload/uploadCover" >
                      <input type="file" size="30" name="userfile[]" id="userfile" class="input" onchange="$('#upload_form').submit();return false;" multiple="multiple">
                </form>
            </td>
    </tr>
    <tr>
        <td>
    </td>
    <td>
    <div id="preview_cover" style="display:none;margin-top: 5px;" >
    </div>
    </td>
    </tr>

    二、jQuery代码如下:

    $(function(){
    $('#upload_form').submit(function(){
    var val = $("#userfile").val();

    if(val === ''){
    weebox_popInfo('e','请选择要上传的图片!','','alert');
    return false;
    }
    var filepath =/.(jpg|jpeg|gif|JPG|JPEG|GIF|PNG|png)$/i;
    if(!filepath.test(val)){
    weebox_popInfo('e','要求为图片文件!','','alert');
    return false;
    }
    $(this).ajaxSubmit(uploadOptions);
    return false;
    });

    var uploadOptions = {
    dataType:'json',
    clearForm:true,
    resetForm:true,
    beforeSubmit: beforeSubmit,
    success: function(json) {
    var imgStr = "";
    var urlString = "";
    if(json.code==1){
    var imgArr = json.url;
    if($.isArray(imgArr)){
    urlString = imgArr.join(',');
    for(var i=0;i<imgArr.length;i++){
    imgStr += "<div id='thumb"+i+"' style='100px; height:125px; float:left;margin-right: 10px;'>";
    imgStr += "<img src='"+imgArr[i]+"' style=' 100px;height: 100px;float: left;'/><br/>";
    imgStr += "<input type='radio' name='default_picture' id='default_picture' value='"+imgArr[i]+"' style=' 20px;height: 18px;float:left;' />主图";
    imgStr += "<a id='delete' onclick='delete_cover(this)' style=' 20px;height: 20px;margin-left: 12px;text-decoration: none;color:#ff5a54;'>删除</a>";
    imgStr += "</div>";
    }
    }else{
    urlString = imgArr;
    imgStr += "<div id='thumb0' style='100px; height:125px; float:left;margin-right: 10px;'>";
    imgStr += "<img src='"+imgArr+"' style=' 100px;height: 100px;float: left;'/><br/>";
    imgStr += "<input type='radio' name='default_picture' id='default_picture' value='"+imgArr+"' style=' 20px;height: 18px;float:left;' />主图";
    imgStr += "<a id='delete' onclick='delete_cover(this)' style=' 20px;height: 20px;margin-left: 12px;text-decoration: none;color:#ff5a54;'>删除</a>";
    imgStr += "</div>";
    }
    var existUrl = $("#pictures").val();
    var inputTab = "";
    if(typeof existUrl !== "undefined"){
    var existArr = existUrl.split(',');
    for(var j=0;j<imgArr.length;j++){
    existArr.push(imgArr[j]);
    }
    var changeUrl = existArr.join(',');
    $("#pictures").val(changeUrl);
    }else{
    inputTab = "<input type='hidden' name='pictures' id='pictures' value='"+urlString+"'>";
    }
    imgStr += inputTab;
    $('#preview_cover').append(imgStr).show();
    }else{
    weebox_popInfo('e',json.msg,'','alert');
    }
    }

    };

    var beforeSubmit = function() {}
    })


    function delete_cover(tag) {

    if($(tag).prev().attr("checked")){
    weebox_popInfo('i', "不能删除主图!");
    }else{
    $(tag).parent().remove();
    }

    var checked_img = $(tag).prev().val();
    var pictures = $('#pictures').val();
    var pictureArr = pictures.split(',');
    for(var i=0;i<pictureArr.length;i++){
    if(checked_img == pictureArr[i]){
    pictureArr.splice(i,1);
    }
    }
    $("#pictures").val(pictureArr);

    }

    三、PHP代码如下:

      public function uploadCover()
      {
    $dirpath='./upload/profile/';
    if(!is_dir($dirpath)){
    mkdir($dirpath);
    }
    $config['upload_path'] = $dirpath;
    $config['allowed_types'] = 'jpg|jpeg|gif|JPG|JPEG|GIF|PNG|png';
    $config['encrypt_name']=true;
    $this->load->library('upload', $config);
    $count=count($_FILES["userfile"]["name"]);//页面取的默认名称
    $url_arr=array();
    for($i=0;$i<$count;$i++){
    $field_name = 'cover' . '_' . $i;
    $_FILES[$field_name] = array('name' => $_FILES["userfile"]['name'][$i],
    'size' => $_FILES["userfile"]['size'][$i],
    'type' => $_FILES["userfile"]['type'][$i],
    'tmp_name' => $_FILES["userfile"]['tmp_name'][$i],
    'error' => $_FILES["userfile"]['error'][$i] );
    if ($this->upload->do_upload($field_name)) { //默认名是:userfile
    $upload_data = $this->upload->data();
    $image_url = array();
    $image_url['image_url'] = '/misc/upload/profile/'.$upload_data['file_name'];
    $url_arr[] = $image_url;
    }else{
    echo $this->upload->display_errors();
    exit(json_encode(array('code'=>0,'msg'=>'系统错误!')));
    }
    }
    $url_arr = array_column($url_arr,'image_url');
    exit(json_encode(array("code"=>1,"url"=>$url_arr)));
    }
    }

    四、效果图如下:

  • 相关阅读:
    python,生产环境安装
    neo4j 图数据库
    RNN系列
    机器学习关于AUC的理解整理
    fensorflow 安装报错 DEPENDENCY ERROR
    dubbo Failed to check the status of the service com.user.service.UserService. No provider available for the service
    使用hbase遇到的问题
    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
    gradle 安装
    jenkins 安装遇到的坑
  • 原文地址:https://www.cnblogs.com/phperlinxinlan/p/11077697.html
Copyright © 2011-2022 走看看