因为之前老师讲的方法有不少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. Linux系统调用怎么和内核或底层驱动交互的

    学习Linux系统下驱动程序开发已有大半年时间,心中一直有个疑惑:那就是诸如open.write.read等系统调用是怎么和内核或底层驱动建立起联系的呢?今天将自己的一些粗略的理解总结如下.      ...

  2. JAVA启动参数整理[转]

    java启动参数共分为三类: 其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容: 其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足, ...

  3. spring-security权限控制详解

    在本例中,主要讲解spring-boot与spring-security的集成,实现方式为: 将用户.权限.资源(url)采用数据库存储 自定义过滤器,代替原有的 FilterSecurityInte ...

  4. spring boot 集成kafka (多线程,消费者使用kafka的原生api实现,因为@KakfkaListener修改groupId无效)

    application-test.properties #kafka kafka.consumer.zookeeper.connect=*:2181 kafka.consumer.servers=*: ...

  5. LeetCode——Is Subsequence

    Question Given a string s and a string t, check if s is subsequence of t. You may assume that there ...

  6. nagios监控3306端口

    1.修改 /usr/local/nagios/etc/objects/commands.cfg  添加一个服务名 # check port define command{ command_name c ...

  7. Matlab 日期频次统计

    一.孕妇建档月份频次统计 源数据样本,为某医院一段时间内的孕妇建档时间 2015-04-22 10:12:522014-11-21 17:16:472013-12-16 17:35:442013-12 ...

  8. Codeforces Round #279 (Div. 2) B. Queue

    B. Queue time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  9. java工具类使用

    ResourceBundle bundle = ResourceBundle.getBundle("res", new Locale("zh", "C ...

  10. vue2.0--vue-router路由

    一.vue-router如何进行参数传递 1.name  $route.name 通过在路由router/index.js中配置路由时定义的name属性来传递 ① 有一个页面components/he ...