工作已经快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. 用R进行微博分析的初步尝试

    新浪微博如火如荼,基于微博的各种应用也层出不穷. 有一种共识似乎是:微博数据蕴含着丰富的信息,加以适当的挖掘.可以实现众多商业应用.恰好社会网络分析也是我之前有所了解并持续学习的一个领域,因此我做了微 ...

  2. muduo源代码分析--Reactor模式在muduo中的使用

    一. Reactor模式简单介绍 Reactor释义"反应堆",是一种事件驱动机制.和普通函数调用的不同之处在于:应用程序不是主动的调用某个API完毕处理.而是恰恰相反.React ...

  3. AutoreleasePool 分析

    前言 AutoreleasePool自己主动释放池,对于自己主动释放对象的作用怎样? 释放池中的自己主动释放对象什么时候会被释放? MRC环境下 场景1 NSString *string_var_ = ...

  4. redux 调试工具

    首先安装谷歌插件: redux-devtools 然后项目中安装插件:redux-devtools-extension 最后在创建 store 的时候进行配置: import { composeWit ...

  5. openstack horizon 学习(1) 总览

    关于Horizon的设计理念: 来自官网(http://docs.openstack.org/developer/horizon/intro.html): Horizon holds several ...

  6. textView设置按下和焦点改变时让字体颜色发生变化

    在res/color/text_color_selector.xml这个下编写: <?xml version="1.0" encoding="utf-8" ...

  7. 【bug】QUOTA_EXCEEDED_ERR: DOM Exception 22

    iOS的Safari在无痕模式下,sessionStorage操作产生异常,报错QUOTA_EXCEEDED_ERR: DOM Exception 22. html5 localStorage err ...

  8. luogu 3371 【模板】单源最短路径

    我太菜了 今天才学会堆优化的dij #include<iostream> #include<cstdio> #include<algorithm> #include ...

  9. 【LNOI 2014】 LCA

    [题目链接] 点击打开链接 [算法] 考虑求lca(x,y)的深度 我们可以将从根到x路径上的点都打上标记,然后,询问y到根上路径的权值和 那么,求sigma(depth(lca(i,z)))(l & ...

  10. 【HDU 1588】 Gauss Fibonacci

    [题目链接] 点击打开链接 [算法] 要求 f(g(0)) + f(g(1)) + f(g(2)) + ... + f(g(n-1)) 因为g(i) = k * i + b 所以原式 = f(b) + ...