欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CI框架结合jQuery实现上传多张图片即时显示

程序员文章站 2022-07-09 21:11:29
一、Html代码如下: 二、jQuery代码如下: 三、PHP代码如下: 四、效果图如下: ......

一、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))); }
}

四、效果图如下:

CI框架结合jQuery实现上传多张图片即时显示