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. centos 安装tmux

    安装tmux之前需要先安装一些支持的组件: yum install libevent-devel ncurses-devel 接下来就是下载源码包进行安装了,以1.6版本举例 wget http:// ...

  2. Spring 的属性注入

    一.注入方式 (1)set方法注入 (2)构造函数注入 (3)p名称空间注入 (4)spel注入 二.复杂类型注入

  3. docker学习笔记-命令大全

    容器生命周期管理 • Run OPTIONS说明: • -a :显示所有的容器,包括未运行的. • -f :根据条件过滤显示的内容. • --format :指定返回值的模板文件. • -l :显示最 ...

  4. 整理python小爬虫

    编码使我快乐!!! 我也不知道为什么,遇到自己喜欢的事情,就越想做下去,可以一个月不出门,但是不能一天没有电脑 掌握程度:对python有了一个更清晰的认识,自动化运维,也许可以用python实现呢, ...

  5. 基于dsp_builder的算法在FPGA上的实现（转自https://www.cnblogs.com/sunev/archive/2012/11/17/2774836.html）

    一.摘要 结合dsp_builder.matlab.modelsim和quartus ii等软件完成算法的FPGA实现. 二.实验平台 硬件平台:DIY_DE2 软件平台:quartus ii9.0 ...

  6. ubuntu下chrome浏览器安装flash插件（pepperflashplugin-nonfree）

    安装前说明: ubuntu的Google 已经不能使用Adobe Flash了,需要用PepperFlashPlayer来替代 Adobe Flash才行. 安装步骤: 1.安装pepperflash ...

  7. jenkins net编译部署 笔记 tips

    1 忘记密码 的话,C:\Users\quyongshuo.jenkins\config.xml 修改 true 为false 重新启动 可以重新设置用户信息. 2 修改端口 Java -jar je ...

  8. iOS安装包瘦身的那些事儿

    在我们提交安装包到App Store的时候,如果安装包过大,有可能会收到类似如下内容的一封邮件: 收到这封邮件的时候,意味着安装包在App Store上下载的时候,有的设备下载的安装包大小会超过100 ...

  9. kaldi的TIMIT实例二

    ============================================================================ MonoPhone Training & ...

  10. php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)

    foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...