//建立一個可存取到該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;
}
$(document).on('change', '.wishfile', function () {
var _upload_file = $(this).val().toLowerCase();
var _upload_file_hz = _upload_file.substr(_upload_file.lastIndexOf('.') + 1);
var _upload_file = ['jpg', 'png', 'gif', 'jpeg'];
if ($.inArray(_upload_file_hz, _upload_file) < 0) {
alert('上传格式不正确');
$(this).val('');
return false;
}
var objUrl = getObjectURL(this.files[0]);
//console.log("objUrl = " + objUrl);
if (objUrl) {
// img src=objUrl
}
});
        // form要写enctype="multipart/form-data"
var formData = new FormData($("#formid")[0]);
$.ajax({
url: 'dopost.php',
type: 'POST',
data: formData,
//async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
if (returndata == 1) {
alert('上传成功');
} else {
alert('上传失败');
}
},
error: function (returndata) {
alert('something wrong!');
}
});

h5 js 图片预览并判断 ajax上传的更多相关文章

  1. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  2. js实现图片预览、压缩、上传

    先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...

  3. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  5. thinkphp3.2.2有预览的多图上传

    thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...

  6. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  7. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  8. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  9. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MySQL的数值类型,时间

    数值类型 整数型 tinyint  smallint  mediumint  int|integer  bigint 注意: 1, 如何选择数据类型,我们的原则是:够用就行!尽量的选择占用内存小的整型 ...

  2. 横向图片墙排列算法及demo

    演示地址: http://codeman35.itongyin.com:19005/v1/9gg_v2.html 功能: 按照不同的图片比例,进行横向9宫格排列,原则是尽量排列的整齐,不要多余出来格子 ...

  3. ARCGIS进行地理配准并加载到谷歌地球中查看

    普通的地图图片如何能让其附有经纬度坐标和投影信息,如何能将普通的地图图片加载到诸如谷歌地球等相关的三维地球软件当中进行生产或学习使用呢,这就要用到gis当中常用的一种功能,叫做地理配准.地理配准并不复 ...

  4. GET与POST的区别

    转自http://blog.csdn.net/darxin/article/details/4944225#comments HTTP请求的GET与POST方式的本质区别可以参考hyddd在<浅 ...

  5. html大牛属性

    <META http-equiv="Content-Type" content="text/htmll;charset=gb2312"> 字体 &l ...

  6. python基础知识---操作文件

    一.打开文件  open()函数 open函数返回一个文件对象. 用法:open('文件名','模式') 打开文件的模式有: r,只读模式(默认). w,只写模式.[不可读:不存在则创建:存在则删除内 ...

  7. Windows下Eclipse+Scala+Spark开发环境搭建

    1.安装JDK及配置java环境变量 本文使用版本为jdk1.7.0_79,过程略 2.安装scala 本文使用版本为2.11.8,过程略 3.安装spark 本文使用版本为spark-2.0.1-b ...

  8. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  9. [转帖]FPGA开发工具汇总

    原帖:http://blog.chinaaet.com/yocan/p/5100017074 ----------------------------------------------------- ...

  10. 微信支付-“申请退款”接口遇到curl出错,错误码:58

    该错误是没有 使用证书 导致的. 解决办法: 1. 下载证书. 2. 拷贝到 WxPayPubHelper/cacert/目录下 重试退款,OK