大致逻辑:点击页面的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实现图片上传预览功能的更多相关文章

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

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

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

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

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

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

  4. JQ实现图片上传预览功能

    <input type="file" name="img" id="test1"> <img src="&quo ...

  5. jquery实现本地图片上传预览和限流处理

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

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

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

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

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

随机推荐

  1. C#压缩文件为zip格式

    Vercher   C#压缩文件为zip格式 需要ICSharpCode.SharpZipLib.dll,网上下载的到. 代码是从网上找来的: 1 public class ZipClass 2 { ...

  2. Mac实用技巧

    1. 程序员Mac新装机必备 Mac很玄这个大家都承认,但是鄙人觉得程序员用Mac才能真正发挥它的功效.下面就说说我的Mac使用: 基本编程软件:xcode,这个东西不仅仅是对mac的界面程序开发有用 ...

  3. 2014年3I工作室成员的正式名单

    后3I认真审议和审查工作室的老师及相关人员,今天,新成员首次正式发布,如以下:博才文(11软件).黄彩云(11软件).朱小丹(11软件).海(11软件).欧剑灵(11此计).黄思源(12软件).黄龙营 ...

  4. 黑客常用的windows注册表大全

    目录 使系统没有"运行"选项                        1让操作系统无"关闭系统" 选项                    2让操作系统 ...

  5. 华为服务器Linux在线做RAID方法

    背景概述 最近维护大数据的一些主机,大概有3k+的数目,有很大一部分是华为的服务器,大部分是12块数据盘,单盘做RAID0来存放数据,但是通常硬件是不可靠的,磁盘损坏是常态, 然而磁盘损坏进行定位更换 ...

  6. 背水一战 Windows 10 (97) - 选取器: CachedFileUpdater

    [源码下载] 背水一战 Windows 10 (97) - 选取器: CachedFileUpdater 作者:webabcd 介绍背水一战 Windows 10 之 选取器 CachedFileUp ...

  7. AngularJS——第7章 依赖注入

    第7章 依赖注入 AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 所谓依赖注入是指在运行时自动查找依赖关 ...

  8. UIKit&#160;框架之UIView二

    下面这些都是UIView一些基本的东西,具体的可以参考UIKit 框架之UIView一博客 一.自定义一个View // // MyView.m // UIView // // Created by ...

  9. delphi版本修改PE头源码

    //VC++6外衣 1 OEPCODEFIVE: THEAD = ($55, $8B, $EC, $6A, $FF, $68, $00, $00, $00, $00, $68, $00, $00, $ ...

  10. Android ffmpeg rtmp(source code)

    souce code: Android.mk 编译生成APK需要调用的so文件 LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODU ...