因为之前老师讲的方法有不少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. JS变量比较陷阱

    我们觉得JS简单是因为它是弱类型的语言,不像java那样对对类型那样敏感,但js也有其不尽人意的地方. 在java中我们无法将数字与字符串直接比较,而js能,而且能直接转换成数值比较,但是如果是字符串 ...

  2. 如何用纯 CSS 创作一个跳 8 字型舞的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKNMMm 可交互视频 此视频是可 ...

  3. BIOS/MBR UEFI/GPT关系与区别-资料整理

    ---恢复内容开始--- 关于 BIOS/MBR UEFI/GPT他们之间的关系一直比较疑惑, 首先一点前提 BIOS UEFI 是一类,是控制硬件,引导启动的:MBR GPT是硬盘的分区定义.. 后 ...

  4. Linux简单编程学习心得

    在Linux环境下简单编程学习心得 linux编程过程 在上周的<信息安全设计基础>的课程学习中学习到了在虚拟的linux环境下简单的编程.学习过程中接触到了vim.gcc和gcd在实验楼 ...

  5. linux系统调用是通过软中断实现的吗

    软中断是利用硬件中断的概念,用软件方式进行模拟,实现宏观上的异步执行效果.很多情况下,软中断和信号有些类似,同时,软中断又是和硬中断相对应的,硬中断是外部设备对CPU的中断,软中断通常是硬中断服务程序 ...

  6. sudo fdisk -l

      施其振 2015/1/31 22:06:26 第一行十大5 施其振 2015/1/31 22:06:39 第一行sda5 施其振 2015/1/31 22:06:49 是你的固态硬盘 施其振 20 ...

  7. python安装包下载慢的问题 | Python

    复制链接,打开迅雷就开始下载了.

  8. web platform installer

    下载链接 https://www.microsoft.com/web/downloads/platform.aspx 默认的安装路径 C:\Program Files\Microsoft\Web Pl ...

  9. [Pytorch]PyTorch使用tensorboardX（转

    文章来源: https://zhuanlan.zhihu.com/p/35675109 https://www.aiuai.cn/aifarm646.html 之前用pytorch是手动记录数据做图, ...

  10. 监控控制台是否运行的bat

    @echo offrem set secs=5set srvname="TRS.Export.Scheduler.exe" echo.echo ================== ...