因为之前老师讲的方法有不少BUG 现在经过完善已经修复

之前老是讲的方法是每一张都会被传到后台文件夹里面去 导致在预览过程中如果刷新页面 那么预览的图片不能从后台文件夹中删除 

这个方法实现在本地预览只要不点上传 就不会存后台文件夹 所以这个方法还是比较科学的  

如果有什么问题欢迎大家留言指教！

下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<style>

	#uploadPreview {

    width: 168px;

    height: 168px;

    background-position: center center;

    background-size: cover;

    border: 4px solid #fff;

    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);

    display: inline-block;

</style>

<body>

<form action="chuli.php" method="post" enctype="multipart/form-data"target="shangchuan">

<input type="hidden" name="tp" value="" id="tp" />

<div id="uploadPreview"></div>

<input id="uploadImage" type="file" name="file" class="fimg1" onchange="PreviewImage();" />

 <input id="aa" type="submit" value="上传" />

</form>

<iframe style="display:none" name="shangchuan" id="shangchuan">

</iframe>

</body>

</html>

<script type="text/javascript">

function showimg(u)

{

    var a1 = u;

	$.ajax({

	url:"add1.php",

	data:{a1:a1},

	type:"POST",

	dataType:"text",

	success:function(data){

			if(data=="1")

			{

				alert("添加成功");

				window.location.href="asd.php";

			}

			else

			{

				alert("");

			}

		}

	})

}

$("aa").click(function(){

	showimg(url);

})

	$("#uploadImage").on("change", function(){

    // Get a reference to the fileList

    var files = !!this.files ? this.files : [];

    // If no files were selected, or no FileReader support, return

    if (!files.length || !window.FileReader) return;

    // Only proceed if the selected file is an image

    if (/^image/.test( files[0].type)){

        // Create a new instance of the FileReader

        var reader = new FileReader();

        // Read the local file as a DataURL

        reader.readAsDataURL(files[0]);

        // When loaded, set image data as background of div

        reader.onloadend = function(){

       $("#uploadPreview").css("background-image", "url("+this.result+")");

        }

    }

});

</script>

　上传处理页面代码：

<?php

if($_FILES["file"]["error"])

{

    echo $_FILES["file"]["error"];

}

else

{

    if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)

    {

        $fname = "./imgg/".date("YmdHis").rand(100,1000).$_FILES["file"]["name"];  

        $filename = iconv("UTF-8","gb2312",$fname);

        if(file_exists($filename))

        {

            echo "<script>alert('该文件已存在！');</script>";

        }

        else

        {

           move_uploaded_file($_FILES["file"]["tmp_name"],$filename);

           echo "<script>parent.showimg('{$fname}');</script>";

        }

    }

    else

    {

    	echo "<script>alert('图片大小超过1M！');</script>";

    }

}

//<title>图片上传预览处理</title>

添加数据库代码：

算了不传了 太简单。。。。　　

　

JQ上传预览+存数据库的更多相关文章

  1. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  2. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  3. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  4. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  5. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

  6. 单图上传预览(uploadpreview )

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

  8. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  9. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

随机推荐

  1. Python高级语法之：一篇文章了解yield与Generator生成器

    Python高级语法中,由一个yield关键词生成的generator生成器,是精髓中的精髓.它虽然比装饰器.魔法方法更难懂,但是它强大到我们难以想象的地步:小到简单的for loop循环,大到代替多 ...

  2. 20145333茹翔 《Java程序设计》实验四 实验报告

    实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用,程序的编辑,调试,运行等).解决办法(空洞的方法如"查网络&q ...

  3. KALI视频学习11-15

    KALI视频学习11-15 第十一集 看到openvas的主界面(web界面) ping靶机,看是否能正常连通 创建一个扫描目标Configuration-Targets,默认扫描目标为本机 添加一个 ...

  4. Mac上Homebrew的使用——Homebrew 使 OS X 更完整

    0 Homebrew是啥? “Homebrew installs the stuff you need that Apple didn’t.——Homebrew 使 OS X 更完整”. Homebr ...

  5. SaltStack配置salt-api第十二篇

    介绍 SaltStack官方提供有REST API格式的 salt-api项目,将使Salt与第三方系统集成变得尤为简单.本文讲带你了解如何安装配置Salt-API, 如何利用Salt-API获取想要 ...

  6. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 B题

    2017-09-24 19:16:38 writer:pprp 题目链接:https://www.jisuanke.com/contest/877 题目如下: You are given a list ...

  7. kubectl delete

    kubectl delete 通过配置文件名.stdin.资源名称或label选择器来删除资源. 支持JSON和YAML格式文件.可以只指定一种类型的参数:文件名.资源名称或label选择器. 有些资 ...

  8. Vuex访问状态对象的方法

    除了<Vuex最基本样例>中的方法外,还有两种方法访问状态对象state: 只需要改app.vue文件 方法一:引入computed <template> <div id ...

  9. JavaScript权威指南--语句

    知识要点 在javascript中,表达式是短语,那么语句(statement)就是整句或命令.表达式计算出一个值,但语句用来执行以使某件事发生. 1.表达式语句 具有副作用的表达式是JavaScri ...

  10. 解决silk-v3-decoder-master转换wav时，百度语音解析问题

    $cur_dir/silk/decoder >& if [ ! -f "$1.pcm" ]; then /usr/local/ffmpeg/bin/ffmpeg -y ...