使用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];//获取文件数据 ...
随机推荐
- thinkphp中dump()方法
dump ThinkPHP 框架 自定义的 用作框架变量 调试用的输出 功能可以说和 var_dump一样的
- 在nodejs中 Object的toString()方法 querystring的stringify() JSON.stringify()
刚学nodejs,做到一个例子:发送简单的HTTP请求.遇到一个问题,客户端给服务端发送的消息到服务端,服务端收不到消息,确切的说是“”. 以下是服务端代码:server.js const http ...
- Spring Boot Executable jar/war 原理
spring boot executable jar/war spring boot里其实不仅可以直接以 java -jar demo.jar的方式启动,还可以把jar/war变为一个可以执行的脚本来 ...
- [转]busybox登陆后没要求输入密码的解决办法
转自:http://blog.chinaunix.net/uid-8058395-id-65785.html 1.制作好ramdisk之后 通过串口进入系统 却发现系统直接登录进去了 并没有要求用ro ...
- 【ZBH选讲·模数和】
[问题描述]你是能看到第二题的friends呢.——laekovHja和Yjq在玩游戏,这个游戏中Hja给了Yjq两个数,希望Yjq找到一些非负整数使得这些数的和等于n,并且所有数模maaaaaaaa ...
- 从K近邻算法、距离度量谈到KD树、SIFT+BBF算法
转载自:http://blog.csdn.net/v_july_v/article/details/8203674/ 从K近邻算法.距离度量谈到KD树.SIFT+BBF算法 前言 前两日,在微博上说: ...
- J2SE总结(一)-------容器
最近大家都在讨论容器以及如何在项目中去实际的应用它,由于之前对容器没有什么概念,所以把J2SE里面讲的容器的一些基础知识看了一下,总结一下最基本的东西. 围绕整章最核心的就属下面这张图了吧. 一.概念 ...
- nutch 2.1安装问题集锦
参照官方文档http://nlp.solutions.asia/?p=180 中间碰到的问题,解决方法参考 http://blog.javachen.com/2014/05/20/nutch-intr ...
- bzoj 1690: [Usaco2007 Dec]奶牛的旅行——分数规划+spfa判负环
Description 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得的闲暇. 很幸运地,奶牛们找到了一张详细的城 ...
- php命名空间与可变函数
命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只要避免命名重复就可以解决 对于命名空间,官方文档已经说得很详细[查看],我在 ...