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

然后在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. 第41篇 推荐一个jekyll博客模板

    本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢).功能改造如下: 添加微信支付宝打赏 ...

  2. 543. Diameter of Binary Tree

    https://leetcode.com/problems/diameter-of-binary-tree/#/description Given a binary tree, you need to ...

  3. Android 图片加载框架Glide4.0源码完全解析(一)

    写在之前 上一篇博文写的是Picasso基本使用和源码完全解析,Picasso的源码阅读起来还是很顺畅的,然后就想到Glide框架,网上大家也都推荐使用这个框架用来加载图片,正好我目前的写作目标也是分 ...

  4. 用javascript实现java的Map

    function Map(){ var obj={}; //空的容器 //put方法 this.put=function(key,value){ obj[key]=value; //把键值绑定到obj ...

  5. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

  6. 透过源码看看Redis中如何计算QPS

    通常我们采集Redis的性能数据时,或者想要知道Redis当前的性能如何时,需要知道这个实例的QPS数据,那么这个QPS数据是如何计算的呢?我们都有哪些办法或者这个QPS ? QPS顾名思义就是每秒执 ...

  7. PHPCMS V9表单向导调用及分页

    参考资料如下:v9_form_tlj为你的表单数据表,`flqh`,`title`,`sj`,`username`,`datetime` 为你表单内的字段,page="$_GET" ...

  8. css透明度的设置

    Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...

  9. postgis 中的距离计算

    最近在做一个项目,有一个功能想要实现类似于查询附近的人的功能.由于项目的原因数据库只能使用 postgresql,空间查询就使用了 postgis 来实现. 具体业务像这样:业务需要返回附近距自己 1 ...

  10. maven下载jar包失败后无法再次重新下载

    maven下载jar包失败后无法再次重新下载:删除maven 资源库中的 *.lastUpdated文件