php批量上传一[带预览]

代码如下:

<?php
require('inc/conn.php');
?>
<head>
<head>
<meta http-equiv="Content-Type" c />
<title>图片上传实现</title>
<script language="javascript">
function preview(x){
    if(!x || !x.value) return;
    var patn = /.jpg$|.jpeg$|.gif$/i;
    if(patn.test(x.value)){
        if(x.parentNode.nextSibling.firstChild){
            //看看是不是已经添加了图片标签,如果添加了就直接修改图片地址
            x.parentNode.nextSibling.firstChild.setAttribute('src','file://localhost/'+x.value);
        }else{
            //没添加就创建个咯,然后加入到当前节点的父节点的下一个节点 -_-
            var img = document.createElement('img');
            img.setAttribute('src','file://localhost/'+x.value);
            img.setAttribute('width',120);
            img.setAttribute('height',100);
            x.parentNode.nextSibling.appendChild(img);
            //parentNode  父节点
            //nextSibling 下个节点
            //appendChild 添加个子节点
                        return(x.value);
        }
    }else{
        alert('貌似你选的不是个图片的说!');
        x.value='';                            //本人不懂js,考来的,对不住各位了,也谢谢原作者!
    }
}
</script>
</head>
</head>
<body>

时间: 2024-09-20 14:27:06

php批量上传一[带预览]的相关文章

php批量上传三[带预览]

<?php if($_POST['upload']=='提交'){ //******************************************************* //**批量上传**********************************************                 function saveImage ($im , $filename)             {                           $r = image

php批量上传五[带预览]

$path=$_SERVER["DOCUMENT_ROOT"];//服务器路径         $i = 0;                  foreach ($_FILES["pictures"]["error"] as $key => $error) {     if ($error == UPLOAD_ERR_OK) {                      $upload_file=$_FILES['pictures']['

php批量上传二[带预览]

<?php $id = $_GET['id']; $sql = "select * from biao where pid=".$id; $res = mysqli_query($conn,$sql); $num = mysqli_num_rows($res);   //现有多少张图片 $sql1 = "select * from biao where id=".$id; $res1 = mysqli_query($conn,$sql1); $row1 = m

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

一次上传多张图片,并且上传前可以预览其缩略图 兼容IE7

问题描述 我想要一个,一次上传多张图片,并且上传前可以预览其缩略图兼容IE7的jquery插件 解决方案 解决方案二:js干不了这事,一般都是flush插件解决方案三:这需要插件.ActiveX.Silverlight.Flash都可以考虑.

php图片上传,可实现预览

php教程图片上传,可实现预览 <?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('image/jpg',  //上传文件类型列表  'image/jpeg',  'image/png',  'image/pjpeg',  'image/gif',  'image/bmp',  'application/x-shockwave-flash',  'image/x-png',  'appl

小技巧:图片在上传之前先预览,无需先上传到服务器上

我在网上看到好多人问如何使用FileUpload上传之前,先预览图片,前提条件,不允许先上传到服务 器上!因为大多搜索的结果实现的方法都是先上传到服务器上,然后显示,如果不确定上传,就删除,这 样的风险太大,性能也消耗很大!下面的代码告诉大家我们不需要先把图片上传到服务器上就可以预览了 ,是不是很酷!不说了,上代码! <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jsp中点击图片弹出文件上传界面及预览功能的实现_JSP编程

花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

分离与继承的思想实现图片上传后的预览功能:ImageUploadView_javascript技巧

本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模