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. MySQL 三 二进制安装

    二进制格式安装   何谓二进制格式安装?   二进制格式安装,编译好的打包在tar文件里,安装时需要下载后解包至编译时指定的位置,然后进行相关配置,完成安装   版本信息:CentOS 7.4 安装m ...

  2. Note of Python Turtle

    Note of Python Turtle         Turtle 库函数是 Python语言中一个流行的绘图函数库.Turtle 意思是海龟,在Python中显示为一个小箭头,通过它的移动而留 ...

  3. Forward团队-爬虫豆瓣top250项目-项目进度

    项目地址:https://github.com/xyhcq/top250 我们的项目是爬取豆瓣top250的电影的信息,在做这个项目前,我们都没有经验,完全是从零开始,过程中也遇到了很多困难,不过我们 ...

  4. Itween的代码使用方法 - 01

    BB:Itween是真心不好用! - 透明度动画 void Start () { //键值对儿的形式保存iTween所用到的参数 Hashtable args = new Hashtable(); / ...

  5. 使用CGlib出现java.lang.NoClassDefFoundError: org/objectweb/asm/Type异常

    在学习使用CGlib生成动态代理对象,项目的源代码也很简单: package proxy; import java.lang.reflect.Method; import net.sf.cglib.p ...

  6. 《Nosql精粹》—— 读后总结

  7. linux内核中GNU C __attribute__ 机制的实用

    很多东西,只看看是不行的,要想深入的去了解一个东西,一定要去不断地学习,实践,反思. 说白了就是要去打磨. 在linux中,最近遇到了这样一个定义: int board_usb_init(int in ...

  8. Servlet-获取页面的元素的值的方式以及区别

    request.getParameter() 返回客户端的请求参数的值:request.getParameterNames() 返回所有可用属性名的枚举: request.getParameterVa ...

  9. Python常用模块——json & pickle

    序列化模块 1.什么是序列化-------将原本的字典,列表等对象转换成一个字符串的过程就叫做序列化 2.序列化的目的 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方 3. ...

  10. IDEA内置git功能的使用教程

    IDEA内置git功能的使用教程 IDEA git  IDEA被公认为是最好的java开发工具,除了在代码助手.代码提示.重构工具等方面有比较好的支持,还在各类版本控制工具(git.tfs.svn.g ...