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. Photoshop制作仿等高线着色图

    起因是最近玩游戏The Long Dark,看到贴吧还是Steam上有人放了等高线图,看起来非常炫酷,于是想自己折腾下. 解包了游戏高度图 Matlab绘制如下 自己瞎写的量化+颜色映射如下,Shad ...

  2. Java并发编程73道面试题及答案

    原文出处:https://blog.csdn.net/qq_34039315/article/details/7854931 1.在java中守护线程和本地线程区别? java中的线程分为两种:守护线 ...

  3. Apache Thrift的C++多线程编程定式

    Facebook贡献给Apache的开源RPC组件Thrift有着广泛的应用,C++中使用Thrift也十分普遍,但由于Thrift的Handler会被多个线程调用,因而多线程中应用并不直接的友好,利 ...

  4. tab下图片要求

    下面是每个tab的属性: 属性 类型 必填 说明 pagePath String 是 页面路径,必须在pages中先定义 text String 是 tab上按钮文字 iconPath String ...

  5. EF6学习笔记（六） 创建复杂的数据模型

    EF6学习笔记总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇原文地址:Creating a More Complex Data Model 本篇讲的比较碎,很多内容本人 ...

  6. EF6 学习笔记（三）：排序、过滤查询及分页

    EF6 学习笔记索引目录页: ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上篇:EF6 学习笔记(二):操练 CRUD 增删改查 本篇原文地址:Sorting, Filterin ...

  7. python3字符串操作

    python3字符串操作 x = 'abc' y = 'defgh' print(x + y) #x+y print(x * ) #x*n print(x[]) #x[i] print(y[:-]) ...

  8. Rabbit RPC 代码阅读（一）

    前言 因为想对RPC内部的机制作一个了解,特作以下阅读代码日志,以备忘. RPC介绍 Rabbit RPC 原理可以用3点概括: 1.服务端启动并且向注册中心发送服务信息,注册中心收到后会定时监控服务 ...

  9. 玩玩vs Git 中国版 Gitee

    下载vs  下载 Gitee.VisualStudio.vsix https://gitee.com/GitGroup/CodeCloud.VisualStudio/attach_files 去git ...

  10. 谷歌浏览器怎么FQ（一）（想使用谷歌浏览器应用商城的小伙伴这边看）

    谷歌浏览器的应用商城里本身有很多不错的扩展程序和插件,比如Wappalyzer(能够识别某个网站用的什么框架和库)广告终结者(能屏蔽大部分浮动,弹窗,甚至视频广告)等 但是谷歌因为某些原因需要FQ以后 ...