无需表单,直接加点击事件即可,

caseimg为input表单,image为图片显示

function upimage() {
$('#form-upload').remove();

$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');

$('#form-upload input[name=\'file\']').trigger('click');

if (typeof timer != 'undefined') {
clearInterval(timer);
}

timer = setInterval(function() {
if ($('#form-upload input[name=\'file\']').val() != '') {
clearInterval(timer);

$.ajax({
url: '/manager/atlas_upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
},
complete: function() {
},
success: function(json) {

if (json['rc']['error']) {
alert(json['rc']['error']);
}
if (json['rc']['success']) {

$('#image').attr('src',json['rc']['src']);
$('#caseimg').val(json['rc']['src']);

}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
}, 500);
}

通用的js异步ajax文件上传函数的更多相关文章

  1. jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  2. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  3. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  4. js 无刷新文件上传 (兼容IE9 )

    之前项目中有个文件上传了需求,于是直接就使用了FormData对象异步上传,但是在测试得时候发现ie9无法正常上传(项目要求兼容IE9+),无奈,查资料得知IE9- 版本不支持formdata对象得异 ...

  5. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  6. ajax 文件上传,ajax

    ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...

  7. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  8. php+ajax文件上传

    php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...

  9. springmvc+ajax文件上传

    环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...

随机推荐

  1. P1231 教辅的组成(最大流)

    P1231 教辅的组成 这个题一看便知是网络流量,(三分图??滑稽..) 就一个小细节,如果我们仅仅将所有的点分成三部分跑网络流的话会有点小问题.. 因为这可能导致一本书被重复利用,就是有两条流经过同 ...

  2. c#复制数组的多种方法

    方法一:使用for循环 int []pins = {9,3,7,2} int []copy = new int[pins.length]; for(int i =0;i!=copy.length;i+ ...

  3. oracle 归档日志:db_recovery_file_dest、log_archive_dest和log_archive_dest_n的区别和使用

    概念: db_recovery_file_dest:默认的指定闪回恢复区路径 log_archive_dest:指定归档文件存放的路径,所有归档路径必须是本地的,默认为''.log_archive_d ...

  4. MongoDB与MySQL效率对比

    本文主要通过批量与非批量对比操作的方式介绍MongoDB的bulkWrite()方法的使用.顺带与关系型数据库MySQL进行对比,比较这两种不同类型数据库的效率.如果只是想学习bulkWrite()的 ...

  5. linux下安装Git并生成SSH key

    系统:contens7.4 1.下载源码解压 wget https://github.com/git/git/archive/v2.3.0.zip unzip v2.3.0.zip cd git-2. ...

  6. LeetCode刷题 链表专题

    链表专题 链表题目的一般做法 单链表的结构类型 删除节点 方法一 方法二 增加节点 LeedCode实战 LC19.删除链表的倒数第N个结点 解法思路 LC24.两两交换链表中的节点 解法思路 LC6 ...

  7. linux查看和修改时间

    查看时间: # date Fri Jan 11 18:04:10 CST 2020设置时间 # date -s "19:20:30"设置日期+时间 # date -s " ...

  8. Part 27 Remove # from URL AngularJS

    There are 4 simple steps to remove # from URLs in Angular. Step 1 : Enable html5mode routing. To do ...

  9. java web 在线编辑Excel -- x-spreadsheet

    --- x-spreadsheet --- 文档 https://hondrytravis.com/x-spreadsheet-doc/ <%@ page language="java ...

  10. 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)

    -*-  父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...