工作已经快2周了,头儿给派了个任务做个企业站!这几天正在紧锣密鼓的作战中!等忙完了这个活!写下自己的学习心得体会!与看到文章的您一起分享!

在这里记录每次遇到的难题,如何解决的!

今天要做的功能就是实现上传图片即时可见!

效果如下:

下面说下大概思路,界面的话,会点儿CSS+DIV  HTML  百度一下都可以解决掉! 我这里写的有点儿稍微代码冗余了!因为就几张图片,懒的用for了!

         js方面:  添加图片之后,取得change的value,写到text中去!这个各个浏览器可能不一样,无所谓了!

        php方面:点击上传,图片上传到php处理, 我是直接写入到xml ,当载入界面之前,先读取xml文档中的值分配到html,而后再载入界面,这样就可以了!

我用CI有的时候直接就显示了,如果不显示应该用js 即时reload一下界面就可以了!

贴上代码:供参考,以及提出批评意见!

HTML代码,这里我就不全部粘贴了,只粘贴了其中3个div   其实这些可以用php的for完成的!

 <div id="slider_manage">
<div class="slider_manage">
<h4>幻灯片管理-1</h4>
<form method="post" enctype="multipart/form-data">
<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">
<input type="text" id="textField_1" class="textField" name="textField" class="txt"/>
<input type="hidden" name="img_num" value="img_1">
<input type="button" class="btn" value="添加...">
<input type="file" name="fileField" class="file" id="fileField_1" size="28" onchange="document.getElementById('textField_1').value = this.value">
<input type="submit" class="btn btn-Submit" value="上传">
</form>
</div>
<div class="slider_manage">
<h4>幻灯片管理-2</h4>
<form method="post" enctype="multipart/form-data">
<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">
<input type="text" id="textField_2" class="textField" name="textField" class="txt"/>
<input type="hidden" name="img_num" value="img_2">
<input type="button" class="btn" value="添加...">
<input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById('textField_2').value = this.value">
<input type="submit" class="btn btn-Submit" value="上传">
</form>
</div>
<div class="slider_manage">
<h4>幻灯片管理-3</h4>
<form method="post" enctype="multipart/form-data">
<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">
<input type="text" id="textField_3" class="textField" name="textField" class="txt"/>
<input type="hidden" name="img_num" value="img_3">
<input type="button" class="btn" value="添加...">
<input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById('textField_3').value = this.value">
<input type="submit" class="btn btn-Submit" value="上传">
</form>
</div>
</div>

js代码如下,主要也在js中控制了上传类型,如果判断不到所需要的类型就直接alert一个警告!并且清楚掉text中的value 以此证明不能上传!其实在input file中应该还是有值的!当时用户看不到以为就清楚了,就会重新上传!

 $(document).ready(function() {
//当文件上传时处理动作,
$('.file').change(function() {
var file = this.value; //取得当前改变的值
var current_text = $(this).parent().find("input[type='text']"); //取得当前form里面的text值 var fileType = file.substring(file.indexOf('.')+1, file.length); //截取文件的类型 switch (fileType.toLowerCase()) {
case 'jpg':
break;
case 'png':
break;
case 'gif':
break;
default :
alert('请上传图片格式'); //如果图片不是jpg png gif 就弹出警告,并且清空text
$(current_text).val('');
break;
} });
});

下面贴上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代码,每次上传都会写入同一个地方,直接覆盖掉原来的值,但是图片已经换掉了!

 <root>
<slider>
<slider_1>img_1.jpg</slider_1>
<slider_2>img_2.jpg</slider_2>
<slider_3>img_3.jpg</slider_3>
</slider>
<indexad>
<left>img_4.jpg</left>
<right>img_5.jpg</right>
</indexad>
</root>

自学php【一】 任务:图片上传即时可见的更多相关文章

  1. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  2. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  4. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

  5. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  6. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  7. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  8. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  9. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

随机推荐

  1. POJ3977 Subset 折半枚举

    题目大意是给定N个数的集合,从这个集合中找到一个非空子集,使得该子集元素和的绝对值最小.假设有多个答案,输出元素个数最少的那个. N最多为35,假设直接枚举显然是不行的. 可是假设我们将这些数分成两半 ...

  2. boost::mpl::eval_if的使用方法

    近期看boost的时候总是遇见这个eval_if,不知道啥意思,就没法看下去了,比方 前篇文章boost::serialization 拆分serialize函数分析时就出现这样一段代码: templ ...

  3. 在head里的CSS link 竟然粗如今body里了?

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVhY2Vfb2Zfc291bA==/font/5a6L5L2T/fontsize/400/fill/I0 ...

  4. Python开发【面向对象编程】

    一.概述 面向过程:根据业务逻辑从上到下,完成代码: 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可: 面向对象:对函数进行分类和封装. 二.面向对象 1.类.对象.方法.实例 ...

  5. Razor基础,视图里如何调用controller里的函数

    1.单行代码书写 @代码 2.多行代码书写 @{ //@加个大括号就可以在里面写C#代码了. C#代码第一行 C#代码第二行 } 3.Razor模板引擎会自动判别代码块,但是当代码存在二义性的时候,可 ...

  6. ci url 控制 查询 通过路由 控制返回 视图的结果

    http://192.168.2.102/fastdatav/ChkUrl/daily/G8 http://192.168.2.102/fastdatav/ChkUrl/daily/ 放在 试图  控 ...

  7. H264--3--NAL层的处理[6]

    ------------------------------H.264的NAL层处理 ------------------------------ H264以NALU(NAL unit)为单位来支持编 ...

  8. POJ 1477:Box of Bricks

    Box of Bricks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19949   Accepted: 8029 De ...

  9. vim升级到8.0

    1.卸载 sudo apt-get remove --purge vim 2.添加8.0的vim源并安装 sudo add-apt-repository ppa:jonathonf/vim sudo ...

  10. 8-15 globalCompositeOperation阶段练习二

    8-15 globalCompositeOperation阶段练习二 <!DOCTYPE html> <html lang="zh-cn"> <hea ...