JS 上传图片 + 预览功能

<body> 
<input type="file" id="fileimg1" style="display:none;" />
<img src="../image/upimg.png" id="upimg1" style=" height: 300px; width:280px;" />
<input type="button" value="选择" onclick="selimg();" />
<input type="button" value="上传" onclick="upimg();" /> 
</body>

<script> 
function selimg() {
$("#file").click();

};
function upimg() {

var fileObj = document.getElementById("fileimg1").files[0]; // js 获取文件对象

// 预览功能
var imgphy1 = getObjectURL(fileObj);
if (imgphy1) {
$("#upimg1").attr("src", imgphy1); //将图片路径存入src中，显示出图片
}

//上传方法一 ：

if (fileObj != undefined) {
var form = new FormData(); // FormData 对象
form.append("file", fileObj, "newname.jpg"); // 文件对象 
var ajaxRequest = $.ajax({
type: "POST", 
url: "http://eplate_mobile.zwtweb.win:83/anju/Web/eplate/picupload.php", /// 跨域上传
contentType: false,
processData: false,
async: true,
data: form,
success: function (data) {
console.log(data);
// alert(data);
var str = data;
console.log(str.search("上传成功") != -1); // true
if (str.search("上传成功") != -1) { 
alert("上传成功 ") 
}

else {
alert("上传失败 ") 
}
}
});

//上传方法二 ：
var data = new FormData(); // 实例化一个表单数据对象
var files = $('#fileimg1').get(0).files; 
if (files.length > 0) {
data.append("ImgFile", files[0]);
data.append("act", "addAnlizw");
}

var ajaxRequest = $.ajax({
type: "POST",
url: "../web_Set/ajaxFileUpload.ashx", // 本域上传图片
contentType: false,
processData: false,
async: true,
data: data,
success: function (data) {
if (data != null && data != "") { 
alert("上传图片成功")
}
else {
alert("上传图片失败")
}
}
});

}

//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>

JS 上传图片 + 预览功能（一）的更多相关文章

  1. JS 上传图片 + 预览功能（二）

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

  2. 简单实现JS上传图片预览功能

    HTML代码 <div class="upload"> <input type="button" class="btn" ...

  3. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  4. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  5. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  6. 关于H5里的API，上传图片预览功能

    FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...

  7. js上传图片&预览（filereader）

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  8. html js 上传图片 预览

    第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的 <!DOCTYPE html> <html> <head> ...

  9. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

随机推荐

  1. sas通过IMPORT过程读取外部文件数据

    SAS通过IMPORT过程读取外部文件数据 使用IMPORT过程导入带分隔符的文件外,Microsoft Access数据库文件.Miscrosft Excel工作簿. dBase文件.JMP文件.S ...

  2. 18.数组(一)之认识java数组

    数组是一个简单的复合数据类型,它是一组有序数据的集合,它当中的每一个数据都具有相同的数据类型,我们通过数组名再加上一个不会越界的下标值来唯一确定数组中的元素. 还有就是,数组是一个特殊的对象. 不管在 ...

  3. Python自动化开发 - MySQL(一)

    本节内容 一.概述 二.下载安装 三.数据库操作 四.数据表操作 五.表内容操作 一.概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么 ...

  4. Android 框架式编程 —— 起篇

    一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...

  5. System.Collections.Generic 源码阅读总结

    ArrayList ,List ArrayList 和 List 都是不限制长度的集合类型 ,List相比ArrayList 就内部实现而言除了泛型本质没有太大区别.不过为避免装箱拆箱问题,尽可能使用 ...

  6. js深拷贝与浅拷贝

    1 基础知识:基本类型与引用类型 JS中可以把变量分成两部分,基本类型和引用类型. 基本类型包括:Undefined.Null.Boolean.Number和String: 引用类型值可能由多个值构成 ...

  7. GDB查看内存(x 命令)

    gdb查看内存命令 首先使用gdb [YourFileName].c进入gdb界面 使用examine命令,字母缩写为x查看内存地址的值.x命令语法 x/[number][format] <ad ...

  8. Java之基础学习（数据类型、运算符、分支语句和循环语句）

    在工作用得比较多的是shell和python编程,对于java以前也学习过,使用很少,这次借朋友推荐的java视频教程来温习下. 也是因为现在很多开源测试工具使用java编写的,学习一下更有助于测试工 ...

  9. ThreadLocal父子线程传递实现方案

    介绍InheritableThreadLocal之前,假设对 ThreadLocal 已经有了一定的理解,比如基本概念,原理,如果没有,可以参考:ThreadLocal源码分析解密.在讲解之前我们先列 ...

  10. HW2017笔试编程题

    一.写一个转换字符串的函数 1.题目描述 将输入字符串中下标为偶数的字符连成一个新的字符串输出,需要注意两点: (1)如果输入字符串的长度超过20,则转换失败,返回“ERROR!”字符串: (2)输入 ...