文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字;

然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面;

最后表单提交时,把文件信息提交给后台,后台将文件信息存到数据库(比如文件名字,路径等);

在展示页面或编辑页面,将文件信息从数据库取出来,就可以直接渲染在页面上了。

整个过程明白了,接下来看看代码是怎么实现的!

一、先渲染表单页面,包括图片上传,代码如下:

<div class="main">
<form action="index.php" method='POST' id="form1">
<p><i id="photoup"></i><span>图片上传(多图上传)</span></p>
<div class="form_item">
<input id="value" type="hidden" name='pics' value="">
<div id="demo">
<div id="as" ></div>
</div>
</div>
<input type='submit' class='button' name='dosubmit' value="提交"/>
</form>
</div>

当然需要css和js,这里上传不了文件,可以去网上下载适用的图片上传插件。

二、点击按钮可以在本地选择图片。

  上面代码中id=demo的div就是图片上传的按钮,给这个按钮加js事件,url为将图片上传到服务器的php文件。代码如下:

$('#demo').on('click', '.diySuccess', function() {
var url_cache = $(this).parent().find('.viewThumb img').attr('data-url'),
arr_cache = JSON.parse($('#value').val()),
new_arr = []; for (var i=0; i<arr_cache.length; i++) {
if (url_cache !== arr_cache[i].url) {
new_arr.push(arr_cache[i]);
}
} $(this).parents('li').remove();
$("#value").val(JSON.stringify(new_arr));
arr = new_arr;
})
var arr=[];
$('#as').diyUpload({
url:'Source/php/uploadify.php',
success:function( data ) {
var data_cache={};
data_cache.name=data.name;
data_cache.url=data.url;
arr.push(data_cache);
$("#value").val(JSON.stringify(arr));
},
error:function( err ) {
console.info( err );
},
buttonText : '选择文件',
chunked:true,
// 分片大小
chunkSize:512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}
});

三、将前端传到后台的图片搬到服务器,也就是上面url地址,Source/php/uploadify.php。代码如下:

<?php
date_default_timezone_set( 'Asia/Shanghai' );
$targetFolder = '/upload/';
if (!empty($_FILES)) {
$file_name = iconv("UTF-8","gb2312", $_FILES['file']['name']); //文件名称
$filenames= explode(".",$file_name);
$tempFile = $_FILES['file']['tmp_name'];
$rand = rand(1000, 9999);
$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/' .ltrim($targetFolder,'/'); //图片存放目录
$targetFile = rtrim($targetPath,'/') . '/' .time().$rand.".".$filenames[count($filenames)-1]; //图片完整路徑 // Validate the file type
$fileTypes = array('jpg', 'jpeg', 'png'); // File extensions
$fileParts = pathinfo($_FILES['file']['name']); if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile)); exit(json_encode(array("url"=>$targetFile,'name'=>$file_name)));
} else {
echo 'Invalid file type.';
}
}

代码中move_uploaded_file()函数就是将临时文件放到服务器。最后返回图片信息,上面代码返回图片name和url。

然后第二步js中将这些信息,放到第一步页面的input的value中,提交表单时,将value提交到后台。

四、点击提交表单,后台php接收到表单数据后,存到数据库。

  第一步页面表单提交路径为index.php,代码如下:

<?php

$images = $_POST['pics'];  //將接收到的數據直接存到數據庫,編輯時放到編輯頁面

$pics = json_decode($images);
foreach ($pics as $k => $va) {
$pic_arr[$k]['name'] = $va ->name;
$pic_arr[$k]['url'] = $va ->url;
}
$pics = serialize($pic_arr); //將數組序列化存到數據庫 $data['images'] = $images;
$data['pics'] = $pics; $db ->add($data);

五、编辑页面,将图片渲染到页面上,并可以编辑图片。代码如下:

          <div class="form_item">
          <input id="value" type="hidden" name='pics' value='{$info.images}'>
<div id="demo">
<div id="as" ></div>
<if condition="$info[images] neq '' ">
<div class="parentFileBox">
<ul class="fileBoxUl">
<volist name='pics' id='vo'>
<li id="fileBox_WU_FILE_{$i}" class="">
<div class="viewThumb">
<img src="{$vo[url]}" data-url="{$vo[url]}">
</div>
<div class="diyCancel"></div>
<div class="diySuccess" style="display: block;"></div>
<div class="diyFileName">{$vo['name']}</div>
<div class="diyBar" style="display: none;">
<div class="diyProgress" style="width: 100%;"></div>
<div class="diyProgressText">上传完成</div>
</div>
</li>
</volist>
</ul>
</div>
</if>
</div>
</div>

这样,完整的图片上传就完成了。包括前端与后台交互。

PHP+js实现图片上传,编辑的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. bootstrap file input 多图片上传编辑THINKPHP5

    {layout name="layout" title="文章添加" /} <form id="defaultForm" role=& ...

  3. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. js判断图片上传时的文件大小,和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  6. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  7. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. 2-SAT算法

    参考blog 参考论文 参考论文 题目 & 题解 裸2-SAT poj3683 poj3207 poj3678 poj3648 2-SAT + 二分法 poj2723 poj2749 hdu3 ...

  2. Unity3d: 资源释放时存储空间不足引发的思考和遇到的问题

    手机游戏第一次启动基本上都会做资源释放的操作,这个时候需要考虑存储空间是否足够,但是Unity没有自带获取设备存储空间大小的 接口,需要调用本地方法分别去android或ios获取,这样挺麻烦的.而且 ...

  3. JSP手动注入 全

    检测可否注入 http://****.house.sina.com.cn/publics/detail.jsp?id=7674 and 1=1 (正常页面) http://****.house.sin ...

  4. 提高java编程质量 - (四)i++ 和 ++i 探究原理

    先看一个例子: package com.test; public class AutoIncrement { public static void main(String[] args) { int ...

  5. iOS-swift-协议和拓展

    1 协议(protocol) 使用关键字 protocol 创建协议. protocol ExampleProtocol { var simpleDescription: String { get } ...

  6. eclipse debug URLClassPath.getLoader(int) file

    版权声明:本文为博主原创文章,未经博主允许不得转载. URLClassPath.getLoader 在用Eclipse调试Java程序时,新手遇到的一个问题是断点老是执行不到,弹出URLClassPa ...

  7. promise(3) '静态'方法

    要是人没有梦想,跟咸鱼又有什么两样了?一直恐惧读源码,哪怕是一个简单的库也是读百来行遇到难点就放弃了.对于新的东西也仅仅是知道它拿来干什么,社区资源在哪里,要用时就突击文档资源使用即可.未有过深入之心 ...

  8. select onchagnge 弹出自己的文本值

    select onchagnge 弹出自己的文本值onchange='alert($("option:selected",this).text())'

  9. Kafka 源代码分析.

    这里记录kafka源代码笔记.(代码版本是0.8.2.1) kafka的源代码如何下载.这里简单说一下. git clone https://git-wip-us.apache.org/repos/a ...

  10. php打包文件为ZIP包后下载到本地

    这是一个工作中需要打包下载当前产品的所有图片到本地,文件格式为ZIP压缩包,打包下载文件跟图片一样,本程序细节为实际情况,使用需按照自己实际情况书写:<?php/**************** ...