首页 > 代码库 > 自学找工作【一】 任务：图片上传即时可见
自学找工作【一】 任务：图片上传即时可见
工作已经快2周了，头儿给派了个任务做个企业站！这几天正在紧锣密鼓的作战中！等忙完了这个活！写下自己的学习心得体会！与看到文章的您一起分享！
在这里记录每次遇到的难题，如何解决的！
今天要做的功能就是实现上传图片即时可见！
效果如下：
下面说下大概思路，界面的话，会点儿CSS+DIV HTML 百度一下都可以解决掉！ 我这里写的有点儿稍微代码冗余了！因为就几张图片，懒的用for了！
js方面： 添加图片之后，取得change的value，写到text中去！这个各个浏览器可能不一样，无所谓了！
php方面：点击上传，图片上传到php处理， 我是直接写入到xml ，当载入界面之前，先读取xml文档中的值分配到html，而后再载入界面，这样就可以了！
我用CI有的时候直接就显示了，如果不显示应该用js 即时reload一下界面就可以了！
贴上代码：供参考，以及提出批评意见！
HTML代码，这里我就不全部粘贴了，只粘贴了其中3个div 其实这些可以用php的for完成的！
1 <div id="slider_manage"> 2 <div class="slider_manage"> 3 <h4>幻灯片管理-1</h4> 4 <form method="post" enctype="multipart/form-data"> 5 <img src="<?php if( isset($slider_2) && $slider_1 == ‘img_1.jpg‘ ){ echo __IMG_READ_URL__ . ‘/slider/‘ . $slider_1 ;} else { echo __IMG_READ_URL__ . ‘/temp.jpg‘;}?>" class="slider_1" width="260" height="150"> 6 <input type="text" id="textField_1" class="textField" name="textField" class="txt"/> 7 <input type="hidden" name="img_num" value="img_1"> 8 <input type="button" class="btn" value="添加..."> 9 <input type="file" name="fileField" class="file" id="fileField_1" size="28" onchange="document.getElementById(‘textField_1‘).value = http://www.mamicode.com/this.value">10 <input type="submit" class="btn btn-Submit" value="上传">11 </form>12 </div>13 <div class="slider_manage">14 <h4>幻灯片管理-2</h4>15 <form method="post" enctype="multipart/form-data">16 <img src="<?php if( isset($slider_2) && $slider_2 == ‘img_2.jpg‘ ){ echo __IMG_READ_URL__ . ‘/slider/‘ . $slider_2 ;} else { echo __IMG_READ_URL__ . ‘/temp.jpg‘;}?>" class="slider slider_2" width="260" height="150">17 <input type="text" id="textField_2" class="textField" name="textField" class="txt"/>18 <input type="hidden" name="img_num" value="img_2">19 <input type="button" class="btn" value="添加...">20 <input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById(‘textField_2‘).value = http://www.mamicode.com/this.value">21 <input type="submit" class="btn btn-Submit" value="上传">22 </form>23 </div>24 <div class="slider_manage">25 <h4>幻灯片管理-3</h4>26 <form method="post" enctype="multipart/form-data">27 <img src="<?php if( isset($slider_3)&& $slider_3 == ‘img_3.jpg‘ ){ echo __IMG_READ_URL__ . ‘/slider/‘ . $slider_3 ;} else { echo __IMG_READ_URL__ . ‘/temp.jpg‘;}?>" class="slider slider_3" width="260" height="150">28 <input type="text" id="textField_3" class="textField" name="textField" class="txt"/>29 <input type="hidden" name="img_num" value="img_3">30 <input type="button" class="btn" value="添加...">31 <input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById(‘textField_3‘).value = http://www.mamicode.com/this.value">32 <input type="submit" class="btn btn-Submit" value="上传">33 </form>34 </div>35 </div>
js代码如下，主要也在js中控制了上传类型，如果判断不到所需要的类型就直接alert一个警告！并且清楚掉text中的value 以此证明不能上传！其实在input file中应该还是有值的！当时用户看不到以为就清楚了，就会重新上传！
1 $(document).ready(function() { 2 //当文件上传时处理动作， 3 $(‘.file‘).change(function() { 4 var file = this.value; //取得当前改变的值 5 var current_text = $(this).parent().find("input[type=‘text‘]"); //取得当前form里面的text值 6 7 var fileType = file.substring(file.indexOf(‘.‘)+1, file.length); //截取文件的类型 8 9 switch (fileType.toLowerCase()) {10 case ‘jpg‘:11 break;12 case ‘png‘:13 break;14 case ‘gif‘:15 break;16 default :17 alert(‘请上传图片格式‘); //如果图片不是jpg png gif 就弹出警告，并且清空text18 $(current_text).val(‘‘);19 break;20 }21 22 });23 });
下面贴上php代码，code中的常量是配置的upload的路径！
write_xml（） 这个函数，可以利用更为简便的方式！
不然这里要写好多case语句！非常冗余，因为时间有限，并且我把前面都写好了！SO。。。 。。。
下次有时间再修改以下！如果您有好的想法，可以回复给我！非常感谢！/** 2 * 首页管理页面载入 3 */ 4 public function index() { 5 //从xml文件获取首页的三张幻灯片和2张广告图 6 $img_arr = $this->get_img_by_xml(); 7 //接收到上传过来的图片文件 8 if( !empty( $_FILES ) && is_array($_FILES)) { 9 10 //img_num 是记录上传的哪张图片的，分别是img_1,2,3 代表幻灯片， img_4,5，代表横幅广告 11 $this->upload_move_process($_FILES, $this->input->post(‘img_num‘)); 12 13 } 14 15 //接收修改公告信息 16 $notice = $this->input->post(‘notice‘); 17 18 if( strtolower($_SERVER[‘REQUEST_METHOD‘]) == ‘post‘) { 19 if($notice == ‘‘) { 20 $img_arr[‘notice_error‘] = ‘没有任何公告可以提交‘; 21 } else { 22 $this->update_notice($notice); 23 $this->alert(); 24 }//endif 25 } 26 $this->load->view(‘index_manage‘, $img_arr); 27 } 28 43 /**处理上传过来的图片文件，移动到指定upload位置，并且写入到xml配置文件 44 * @param $uploadFile $_FILES 45 */ 46 private function upload_move_process($uploadFile, $img_num) { 47 $tmp_name = $uploadFile[‘fileField‘][‘tmp_name‘]; 48 $file_name = strstr( $uploadFile[‘fileField‘][‘name‘], ‘.‘ );//获取文件后缀 49 if(is_uploaded_file( $tmp_name ) ) { 50 if($uploadFile[‘fileField‘][‘error‘] == 0) {//文件上传 51 if(is_dir(__UPLOAD_FILE__ . ‘/slider‘)) { 52 move_uploaded_file($tmp_name, __UPLOAD_FILE__ . ‘/slider/‘ . $img_num . ‘.jpg‘); 53 } else { 54 mkdir(__UPLOAD_FILE__ . ‘/slider‘); 55 move_uploaded_file($tmp_name, __UPLOAD_FILE__ . ‘/slider/‘ . $img_num . ‘.jpg‘); 56 } 57 //写入到xml配置文件 58 $this->write_xml($img_num); 59 }//endif 60 }//endif 61 return TRUE; 62 } 63 64 /**将img写入到xml文件中 65 * @param $img_num 原型是img_1 img_2 img3 就是当前修改的图片 66 */ 67 private function write_xml($img_num) { 68 //这里应该加判断xml文件是否存在，不存在就新建一个！出于给客户就已经带着xml文件，这里就不再创建！ 69 $xml = simplexml_load_file(__IMG_CONFIG__); 70 $slider = $xml->slider; $indexad = $xml->indexad; 71 switch($img_num) { 72 case ‘img_1‘: 73 $slider->slider_1 = $img_num . ‘.jpg‘; 74 break; 75 case ‘img_2‘: 76 $slider->slider_2 = $img_num . ‘.jpg‘; 77 break; 78 case ‘img_3‘: 79 $slider->slider_3 = $img_num . ‘.jpg‘; 80 break; 81 case ‘img_4‘: 82 $indexad->left = $img_num . ‘.jpg‘; 83 break; 84 case ‘img_5‘: 85 $indexad->right = $img_num . ‘.jpg‘; 86 } 87 file_put_contents(__IMG_CONFIG__, $xml->asXML()); 88 } 89 90 /**获取首页幻灯片以及广告图 91 * @return mixed 数组对象 92 */ 93 private function get_img_by_xml() { 94 $xml = simplexml_load_file(__IMG_CONFIG__); 95 $slider = $xml->slider; 96 $indexad = $xml->indexad; 97 $img[‘slider_1‘] =(string)$slider->slider_1; 98 $img[‘slider_2‘] =(string) $slider->slider_2; 99 $img[‘slider_3‘] =(string) $slider->slider_3;100 $img[‘ad_left‘] =(string)$indexad->left;101 $img[‘ad_right‘] =(string)$indexad->right;102 return $img;103 }
贴上XML代码，每次上传都会写入同一个地方，直接覆盖掉原来的值，但是图片已经换掉了！
1 <root> 2 <slider> 3 <slider_1>img_1.jpg</slider_1> 4 <slider_2>img_2.jpg</slider_2> 5 <slider_3>img_3.jpg</slider_3> 6 </slider> 7 <indexad> 8 <left>img_4.jpg</left> 9 <right>img_5.jpg</right>10 </indexad>11 </root>
自学找工作【一】 任务：图片上传即时可见
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。