iframe模拟异步上传图片

<iframe id="uploadframe" width="0" height="0" style="display:none;" name="upload_target"></iframe>

<form id="uploadpic" target="upload_target" enctype="multipart/form-data" method="post" action="" style="display: none;">

<input type="file" name="uploadImg" id="uploadImg">

</form>

$(function(){

$("#uploadImg").change(function(){

   if($(this).val() && checkFile(‘uploadImg‘)){

?       $(‘#uploadpic‘).submit();

       $(this).val(‘‘);?

       return true;

       //$(‘#uploadpic‘).submit();?

   }

   return false;

});

});

function checkFile(id)

{

    extensions = ‘jpg,gif,png,jpeg‘;

    var path = document.getElementByIdx_x_x_x_x_x_x(id).value;

    var ext = getExt(path);

    var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");

    if(extensions != ‘‘ && (re.exec(extensions) == null || ext == ‘‘)) {

        $.messager.alert("对不起,只能上传jpg, jpeg, png, gif类型的图片!");

        $(‘#‘+id).val(‘‘);

        return false;

    }

    //showLoading();

    return true;

}

function getExt(path) {

    return path.lastIndexOf(‘.‘) == -1 ? ‘‘ : path.substr(path.lastIndexOf(‘.‘) + 1, path.length).toLowerCase();

}
时间: 2024-10-08 19:23:41

iframe模拟异步上传图片的相关文章

form、iframe实现异步上传文件

转载自:http://blog.csdn.net/sunjing21/article/details/4779321 实现主要功能: 页面提供一个上传图片的input file选择框,用于上传某一类型的数张图片 每次选择完本地图片后,图片便异步存储到后台的文件夹中: 并将路径信息存储到数据库中: 页面上显示此图的缩略图,并在旁边显示一个删除标记,当点击时,将此图片从页面.数据库.后台的文件夹中删除 input file选择框清空,再点击用于上传下一张图片: JSP页面编写如下: <div> &

ajax异步上传图片三种方案

转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我

利用KindEditor的uploadbutton实现异步上传图片

利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最常用的方法就是图片在iframe中上传,这样只需要刷新iframe,而不用刷新整个页面.     KindEditor文本编辑器框架中uploadbutton可以帮助我们实现,不再需要我们自己去写iframe的实现,使用起来很方便. html部分: ..... <input class="" type="text" name="beautyTown.img_0"

使用ajaxFileUpload实现异步上传图片

index.html <head runat="server"> <title></title> <script src="jquery.min.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"><

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-form"> <input id="fileupload" type="file" name="file" > </form> HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分.

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

ajax异步上传图片&amp;SpringMVC后台代码

function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post", dataType : "json", success : function(data){ $("#allUrl").attr("src", data.url); $("#imgUrl").val(data.url);

php结合jquery异步上传图片(ajaxSubmit)

php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

搭建一个Tomcat,作为图片服务器,异步上传图片

1.图片服务器Tomcat的设置  tomcat/conf/web.xml中内容更改,将tomcat设置为可以读写 <servlet>     <servlet-name>default</servlet-name>             <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>         <init-param>