因为之前老师讲的方法有不少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. windows忘记密码

    方法一 在开机时,按下F8进入”带命令提示符的安全”模式 输入”NET USER+用户名+123456/ADD”可把某用户的密码强行设置为”123456″ 方法二 如用户忘记登入密码可按下列方法解决 ...

  2. ES6、7、8常用新特性总结(超实用)

    ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...

  3. Spring Security核心概念介绍

    Spring Security是一个强大的java应用安全管理库,特别适合用作后台管理系统.这个库涉及的模块和概念有一定的复杂度,而大家平时学习Spring的时候也不会涉及:这里基于官方的参考文档,把 ...

  4. Win10下配置Java 环境变量

    在Win10中配置环境变量的方法跟在Win8和Win7中有些不同,看了看网上好多还是Win7/8里面的配置方法.虽然从原理上基本上没什么问题,但有些细节却会让人很苦恼.特意整理下新的配置方法.我假定你 ...

  5. 广播机制的CS模型实现

    广播机制的cs模型实现如下: 首先可以使用ifconfig命令查看自己所在网段的广播地址 server.c #include<stdio.h> #include<unistd.h&g ...

  6. mysql分库分表(二)

    mysql分库分表 参考: https://www.cnblogs.com/dongruiha/p/6727783.html https://www.cnblogs.com/oldUncle/p/64 ...

  7. 解题报告：hdu1248寒冰王座 - 完全背包模板

    2017-09-03 16:16:38 writer:pprp 完全背包问题:从左向右进行扫描,用一维阵列进行分析 代码如下: /* @theme:hdu1248 寒冰王座 @writer:pprp ...

  8. Python学习札记(十八) 高级特性4 生成器

    参考:生成器 Note 1.通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的,且容易造成空间浪费.所以,如果列表元素可以按照某种算法推算出来,那我们可以在循环的过程中 ...

  9. 02_Storm集群部署

    1. 部署前的硬件及软件检查 硬件要求 1)storm集群部署包括zookeeper部署,而zookeeper集群最小为3台机器2)storm的计算过程都在内存中完成,因此内存要尽量大3)storm少 ...

  10. 06_zookeeper_原生API使用2

    1. 设置znode节点数据(同步) import org.apache.zookeeper.*; import org.apache.zookeeper.data.Stat; import java ...