自学找工作【一】 任务：图片上传即时可见
浏览数：21 /
时间：2015年06月09日
工作已经快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 = 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 = 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 = 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 就弹出警告，并且清空text 18 $(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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
