上传图片前浏览图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">

  </script>
 </head>

 <body>
  <form name="form4" id="form4" method="post" action="#">
	  <input type="file" name="file4" id="file4"  onchange="preview4()" />
	  <img id="pic4" src="" alt="图片在此显示" width="120"/>
  </form>
  <script type="text/javascript">
  function preview4(){
	  var x = document.getElementById("file4");
	  var y = document.getElementById("pic4");
	  if(!x || !x.value || !y)            return;
	  var patn = /\.jpg$|\.jpeg$|\.gif$/i;
	  if(patn.test(x.value)){
	  y.src = "file://localhost/" + x.value;
  }else{
	alert("您选择的似乎不是图像文件。");
  }
  }
  </script>
 </body>
</html>

上传图片前浏览图片

时间: 2024-10-10 20:52:52

上传图片前浏览图片的相关文章

elementUI上传图片前判断图片的尺寸大小

在上传图片前判断尺寸的大小,遇到了好多的坑. 1.没有注意到onload是异步加载,所以一定要在onload后在执行判断图片尺寸 2.upload内部需要一个promise,简单的return出false并没有什么用 3.完整代码: beforeAvatarUpload(file) { const isSize = new Promise(function(resolve, reject) { let width = 100; let height = 100; let _URL = windo

上传图片之前浏览图片效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> <script type="te

jquery上传图片---本地浏览图片

//说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片固定大小容器的高 //imgDiv 页面DIV的JQuery的id //maxSize 图片大小最大限制(K) //imgType 数组后缀名 //**********************图片上传预览插件************************* (function ($) { jQuery.fn.extend({ upl

关于angularjs input上传图片前获取图片的Size 浅析

首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { return { scope: { selectedFile: "=", changed: '&' }, link: function(scope, element, attributes) { element.bind("change", function(c

ckedit 浏览图片和上传图片

<head>标签内引入 <script src="${ctx}/ckeditor/ckeditor.js" type="text/javascript"></script> config.js配置文件 CKEDITOR.editorConfig = function( config ) {  // Define changes to default configuration here. For example:  config.

php批量上传图片并把图片名放入数据库

    前几天工作中要做这样一个功能,有八百多个系统 生成的会员:给这八百多个系统会员上传图片:然后把图片名放入数据库. 第一步: 第一步肯定是首先把图片上传到对应的图片目录下,直接用框架中已经有的上传类: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!--?php                try {                     $upload=new Upload();       

Android浏览图片,点击放大至全屏效果

最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 一般缩略界面的ImageView的是如上图所示的正方形的,并且是CENT

关于百度world 编辑器改变上传图片的保存路径图片不显示的问题

在ueditor.mini for asp.net 中,将上传的图片保存的路径更改了,可图片在 world 编辑器中不显示,但却可以上传到指定的保存目录下,解决这个问题的方法 是: 在udditor_mini--->third-party---->umeditor.config.js中, 也就是 ueditor 的配置文件(js文件 ) 中, 找到  window.UMEDITOR_CONFIG  这个配置, 就在 配置中的首部,将 imgUrl 和 imgPath 设置的目录前部分要一致,这

Android 自定义Gallery浏览图片

之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实这个效果使用的知识点就是图像的获取.创建.缩放.旋转.Matrix类.Canvas类等,另外就是自定义的Gallery控件. 相信大家都期待马上上代码了吧,嘻嘻.(注释比较多,相信大家都能看懂.) main.xml: <?xml version="1.0" encoding=&quo