php图片预览ajax,使用ajax，结合jquery,php实现图片上传预览功能

大致逻辑：点击页面的file，上传图片到指定的php处理图片的文件，处理完成以后，将图片的连接地址返回，JS控制返回的数据，然后将图片动态的展示出来

html代码

js代码

$(document).ready(function() {

var url = "fileupload.php";　　　　//这里是你需要那个文件来处理图片

$("#file").change(function() {

//普通上传

var upload = function(f) {

var xhr = new XMLHttpRequest();

xhr.open('POST', url, true);

var formData;

formData = new FormData();

formData.append('file', f);

xhr.onreadystatechange = function(response) {

if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {

$(".fileimg").attr("src","{:C('PUBLIC')}/"+(xhr.responseText));

$("#file").remove();

$("#nowPic").val(xhr.responseText);

} else if (xhr.status != 200 && xhr.responseText) {

}

};

xhr.send(formData);

};

if ($("#file")[0].files.length > 0) {

upload($("#file")[0].files[0]);

} else {

console && console.log("form input error");

}

})

});

php代码 使用的是thinkphp3.2.3来处理的

public function index($type='upload')

{

$upload = new \Think\Upload();// 实例化上传类

$upload->rootPath = './Public/Uploads/'.$type.'/'; // 设置附件上传根目录

$upload->autoSub = false;

$info = $upload->upload();

if (!$info){

$this->error($upload->getError());

}else{

//echo json_encode('/Uploads/'.$type.'/'.$info['savepath'].$info['savepath']);

echo '/Uploads/'.$type.'/'.$info["file"]['savepath'].$info["file"]['savename'];

}

}

HTML+Jquery实现多图片上传预览功能

HTML:使用input的onchange事件,它一改变就触发事件

JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

js实现图片上传预览功能，使用base64编码来实现

实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

JQ实现图片上传预览功能

12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

js前端实现多图图片上传预览

随机推荐

Hibernate逍遥游记-第1章-JDBC访问数据库

1. package mypack; import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.sw ...

deb包处理

1.卸载 dqpg -l 查看信息 dqpg -r  ******  卸载 2.安装 dqpg -i ...............deb

PHP字符串和数组

php常用函数和数组 字符串替换 , 分割字符串(字符串转数组),  拼接数组的值(数组组转字符串) , 格式化输出  查找字符首次出现的位置 , 获取字符串长度 以一个数组作为key另一个数组作为v ...

网页设计——6.html其他标签

今天学习html的其他标签: 一.列表 1.无序列表ul 基本结构:

• 列表内容

ES--07

61.索引管理_快速上机动手实战创建.修改以及删除索引 课程大纲 1.为什么我们要手动创建索引? 2.创建索引 创建索引的语法 PUT /my_index{ "settings": ...

centos 搭建 leanote

centos 搭建leanote(蚂蚁笔记) 至于蚂蚁笔记是什么可以看官网的介绍,https://leanote.com/  ,我只能说 nice,你值得拥有. 开始搭建(源码安装,安装路径在 /et ...

RSA key format is not supported

对接支付宝时,提示RSA错误 : 请仔细检查 : 创建支付对象时,关键字参数的名字 如果公私钥是以拼接路径的方式传递给AliPay,正确的关键字参数的名字应该如下 :

8、JPA-映射-双向一对一

一个管理对应一个部门,一个部门对应一个管理,例中由部门维护关联关系 实体类 Department package com.jpa.yingshe; import javax.persistence.* ...

Cocosd-x-2.2.2 & VS2012 & Eclipse 开发环境搭建

1.安装软件: 1.1 安装JDK(JDK1.7.0_51) JAVA_HOME C:\Program Files\Java\jdk1..0_51 CLASSPATH .;%JAVA_HOME%\li ...

C++/VC中ANSI与UNICODE中字符定义和函数对照表

这样查起来方便多了 ANSI UNICODE 通用 说明 数据类型 (char.h) (wchar.h) (tchar.h)   char wchar_t TCHAR   char * wchar_t ...