使用ajax,结合jquery,php实现图片上传预览功能
大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来
html代码
<label>
<img class="fileimg" height="200px;" src=""/>
<input type="file" style="display: none;" id="file" class="files" />
<input type="hidden" name="pic" id="nowPic" value="{$data_view.pic}">
</label> 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'];
}
}
使用ajax,结合jquery,php实现图片上传预览功能的更多相关文章
- HTML+Jquery实现多图片上传预览功能
HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...
- js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
- JQ实现图片上传预览功能
<input type="file" name="img" id="test1"> <img src="&quo ...
- jquery实现本地图片上传预览和限流处理
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现图片上传预览功能,使用base64编码来实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
随机推荐
- php session 测试
2018-06-22 08:26:30 session指的是默认php提供的文件session形式 当前我的认识是,php并不记录session的过期时间,但是php.ini中有session的垃圾回 ...
- 全球顶尖的内容创作引擎,Unity为创造而生
5月11日晚,Unite Beijing 2018 Keynote主题演讲于国家会议中心圆满落幕.今年的Keynote主题演讲汇聚了12位重量级嘉宾,为参会者呈现出了一场属于Unity 2018的技术 ...
- Glibc说明
Glibc glibc是gnu发布的libc库,也即c运行库.glibc是linux系统中最底层的api(应用程序开发接口),几乎其它任何的运行库都会倚赖于glibc.glibc除了封装linux操作 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- bzoj 3160 万径人踪灭 FFT
万径人踪灭 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1936 Solved: 1076[Submit][Status][Discuss] De ...
- Ajax基础知识 浅析(含php基础语法知识)
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- parallel programming. this causual litery nots represents my recent progress in parallel programming in c#.It`s interesting.
not to say extra words,let`s start the code. pasted below: using System; using System.Collections.Ge ...
- Photoshop cs6 快捷键命令大全
工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具.单行单列选取工具 [M] 裁剪工具.透视.切片.透视裁剪工具 [C] 移动工具 [V] 套索.多边形套索.磁 ...
- java keytool证书工具使用小结(转)
Keytool 是一个Java数据证书的管理工具 ,Keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件中在keystore里,包含两种数据:密钥实体(K ...
- FileReader&FileWriter
FileReader public static void main(String[] args) { //创建文件对象指定要读取的文件路径 File file=new File("d:\\ ...