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='width:100px; height:125px; float:left;margin-right: 10px;'>";
                       imgstr += "<img src='"+imgarr[i]+"' style='width: 100px;height: 100px;float: left;'/><br/>";
                       imgstr += "<input type='radio' name='default_picture' id='default_picture' value='"+imgarr[i]+"' style='width: 20px;height: 18px;float:left;' />主图";
                       imgstr += "<a id='delete' onclick='delete_cover(this)' style='width: 20px;height: 20px;margin-left: 12px;text-decoration: none;color:#ff5a54;'>删除</a>";
                       imgstr += "</div>";
                   }
               }else{
                   urlstring = imgarr;
                   imgstr += "<div id='thumb0' style='width:100px; height:125px; float:left;margin-right: 10px;'>";
                   imgstr += "<img src='"+imgarr+"' style='width: 100px;height: 100px;float: left;'/><br/>";
                   imgstr += "<input type='radio' name='default_picture' id='default_picture' value='"+imgarr+"' style='width: 20px;height: 18px;float:left;' />主图";
                   imgstr += "<a id='delete' onclick='delete_cover(this)' style='width: 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)));    

  }
}

四、效果图如下: