因为之前老师讲的方法有不少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. 《Java程序设计》实验3

    20145318 <Java程序设计>实验3 实验内容 使用 git 上传代码 使用 git 相互更改代码 实现代码的重载 PSP 队友链接 http://www.cnblogs.com/ ...

  2. android与linux之间的关系

    篇一(system/core/init/init.c): 对Android感兴趣的朋友都知道,Android系统是建立在Linux内核之上的.那么Linux内核和Android什么关系?Linux内核 ...

  3. CentOS 6.2配置本地yum源

    转载自http://www.cnblogs.com/centoser/articles/2411694.html#undefined 一.挂载本地光盘到系统:把Cent6.2安装光盘放入光驱,在终端命 ...

  4. ElasticSearch集群故障案例分析: 警惕通配符查询

    最近ElasticSearch集群出现了 https://elasticsearch.cn/article/171 文章中描述的情况,现在转载全文警示下自己. 许多有RDBMS/SQL背景的开发者,在 ...

  5. 实现基本的Ajax和Json请求

    前面已经封装好了一个方法ajax(),通过这个方法可以实现Ajax请求,接下来就是给出 例程来测试这个方法和实现简单的功能.   视图的部分代码如下: <body> <div> ...

  6. solr 5.1.0安装-Windows（亦可用于5.4.1）

    以前4.10的时候写过一个安装教程,是安装在tomcat的,在来安装5.1的时候,看了下简介,发现从5.x后solr集成了jetty,安装变得简单了不少. 现在只需要三步就能搞定,下载solr包解压, ...

  7. Eclipse关联JDK源码

    1. http://blog.csdn.net/weiwangchao_/article/details/25960961 2. 1.点 "window">"Pre ...

  8. 使用 Vs 2015 快速上手 Angular2

    Visual Studio 2015 快速上手(使用Angular2)https://angular.cn/guide/visual-studio-2015 使用 Vs 2015 快速上手 Angul ...

  9. 值类型的TryParse

    值类型(Struct(如:DateTime).基本类型(如:double).枚举类型)的TryParse方法,通常可使用该方法将“字符串”转换为当前类型,并out出.比如:日期格式的字符串   转换为 ...

  10. MS SQL2008执行大脚本文件时，提示“内存不足”的解决办法

    问题描述: 当客户服务器不允许直接备份时,往往通过导出数据库脚本的方式来部署-还原数据库, 但是当数据库导出脚本很大,用Microsoft SQL Server Management Studio执行 ...