html 选择本地图片，显示选择的图片

主要用的是html5的文件系统部分：

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>xxx</title>
<script src="im.js"></script>
<script>
function handleFiles(files) {
  var preview = document.getElementById(‘preview‘);
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;

    if ( !imageType.test(file.type) ) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    // 假设 "preview" 是将要展示图片的 div
    preview.appendChild(img);

    var reader = new FileReader();
    reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(img);
    reader.readAsDataURL(file);
  }
}
</script>
</head>
<body style="margin: 25px;">
<input type="file" id="input" onchange="handleFiles(this.files)">
<div id = "preview"></div>
<!-- <img src="file:///Users/staff/Desktop/%E5%9C%B0%E8%A1%A8.png" width="2500" height="650"> -->
</body>
</html>

参考：

https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html

http://www.html5rocks.com/zh/tutorials/file/filesystem/#toc-file

时间： 2024-11-08 21:08:11

html 选择本地图片，显示选择的图片的相关文章

discuz x3.3排行首页图片显示更多的图片

找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 $ranklist = getranklist_pictures_index(11); 然后更新缓存,图片排行就可以显示出11个图片,这样就清爽的多了http://bbs.yuanzhumuban.cc/ 原文地址:https://www.cnblogs.com/68xi/p/11582703.ht

点击跳转到系统图库，然后将选择回来的图片显示到应用上

有时候需要跳转到系统图库选图,那么用以下代码实现 /**点击跳转到系统图库,然后将选择回来的图片显示到应用上*/ public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act

Android选择本地图片并裁剪工具类

先说用法 1.开始选图(相机.相册) //这句代码启动相机拍照 SelectPicUtil.getByCamera(this); //这句代码跳转到相册选图 SelectPicUtil.getByAlbum(this); 2.处理图片,在onActivityResult中处理 protected void onActivityResult(int requestCode, int resultCode, Intent data) { //输出图片800*400大小,选择图片时的裁剪比例是2

通过拍照或选择本地图片并剪裁图片设置成头像，并保存裁剪后图片与本地方便注册头像上传

1 import java.io.File; 2 3 import android.app.AlertDialog; 4 import android.content.Context; 5 import android.content.DialogInterface; 6 import android.content.Intent; 7 import android.graphics.Bitmap; 8 import android.graphics.drawable.BitmapDrawabl

iOS常用到的图片功能:截取当前屏幕/选择本地图片/图片压缩

截取当前屏幕 UIGraphicsBeginImageContextWithOptions(CGSizeMake(CGRectGetWidth(self.superview.frame), CGRectGetHeight(self.superview.frame)), NO, 1); [self.superview drawViewHierarchyInRect:CGRectMake(0, 0, CGRectGetWidth(self.superview.frame), CGRectGetHei

选择本地照片之后即显示在Img中(客户体验)

最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NET),代码就不再写了 ASP.NET实现方式(当时使用的是服务器控件UpLoad): 一个Img控件,一个UpLoad控件先创建另一个新的ASP.NET页面,上传照片的时候,先把照片上传显示在这个ASP.NET页面上,然后IMG中的src链接到这个页面就O了(方法很笨,但是刚出来就是这么实现的,现

libgdx学习记录23——图片移动选择

模拟移动选择图片,采用相机实现. 1 package com.fxb.newtest; 2 3 import com.badlogic.gdx.ApplicationAdapter; 4 import com.badlogic.gdx.Gdx; 5 import com.badlogic.gdx.graphics.Color; 6 import com.badlogic.gdx.graphics.GL10; 7 import com.badlogic.gdx.graphics.Texture;

网页设计你应该知道的图片格式选择技巧

网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式.并交由下一位人员网页排版的重要步骤.选择适合的图片格式不但可以将让界面设计得到合理的显示效果.甚至还可以有效的控制图档的档案大小,节省下载时间.有效的减少服务器的负担. 以UI设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用-」的功能.与默认的存盘模式不同,在这个模式中,软件提供了仿真图文件输出的质量调整.档案大小控制等针对网页图文件需求的选项: 相信许多人都知道网页设计中

JS预览图像将本地图片显示到浏览器上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从

【.Net】在WinForm中选择本地文件

相信很多朋友在日常的编程中总会遇到各钟各样的问题,关于在WinForm中选择本地文件就是很多朋友们都认为很难的一个学习.net的难点, 在WebForm中提供了FileUpload控件来供我们选择本地文件,只要我们将该控件拖到页面上了,就已经有了选择本地文件的功能了.而在 WinForm中,并没有为我们提供集成该功能的控件,但为我们提供了OpenFileDialog类,我们可以利用该类来打开与选择本地文件. OpenFileDialog类,提供了提示用户打开文件的功能,它有如下属性和方法: 属性