ajax上传图片文件

这里用的是一个隐藏的iframe,这样可以让form表单提交到这个iframe里面,用户就看不到页面的刷新了

前段时间在解决ajax上传文件时折腾了好一阵。直接用$.post上传文本信息肯定是没有问题的。但是$.post直接上传图片是不可行的。

后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的。flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大。

最后只好模拟iframe来实现。发现相当的简单。

<iframe name="ajaxUpload" style="display:none"></iframe>

<form name="from1" id="from1" method="post" action="url"  enctype="multipart/form-data" target="ajaxUpload">     这里是重点。要上传文件enctype这个属性不可少,target的值改为iframe的name的值。

<table>

<tr>

<td>附件:</td>

<td><input type="file" id="document" name="document"/></td>

</tr>

</table>

</form>

上面是HTML

下面写一下js代码,我是用的jQuery所以在用的时候载入jquery的库是必不可少的。

$(function(){

if($.browser.msie){

window.form1.submit();}else{

$("#form1").submit();}

});

//这里是做了一个浏览器版本的判断,因为IE是不太符合规范的一个浏览器,尤其是IE6。IE6是不直接支持$("#idName").submit();这种方式的。

然后在服务端要怎么着呢,而且还得返回一个值,直接submit是无法返回值的

public void Upload()

{

HttpPostedBase ff=Request.Files["document"];//这里是获取上传的文件流,也可以用索引值来表示如果是多个文件的话

string fileName=System.DateTime.Now+ff.FileName.ToString();   //这里取出来的文件名是没有后缀的,所以要保存的话还需要取出文件拓展名。这里就不写过细,只是为描述这样一个思路。

try{

SaveAs(documentPath+fileName+extendtionName);

Response.Write("<script type=‘text/javascript‘ type=‘language‘>parent.window.callBackMethod(‘上传成功‘);</scrpt>");

}

catch

{

Response.Write("<script type=‘text/javascript‘ type=‘language‘>parent.window.callBackMethod(‘上传失败‘);</scrpt>");  //parent.window.methodName();这个是JS调用父页的方法。因为现在模拟一个iframe上传文件,这个iframe的作用就是一个中间站的作用。在父页点击上传后通过target会将页面文档流传入iframe中再上传服务端作处理。服务端有响应之后然后再在iframe里面显示出来,而不是直接在父页面显示出结果。这里可能就是一个alert()弹出一个对话框提示一下,如果是这样那么不调父页方法也行。如果想把这提示的内容丰富一点比如弹出个类似人人网的蓝色的对话框之类的。

}

}

模拟iframe其实是页面局部更新,但是页面中的这个iframe没有内容而且还是不显示的,所以它刷新了完全不会影响到整个页面。

时间: 2024-10-10 08:05:11

ajax上传图片文件的相关文章

Ajax上传图片文件到服务器

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadByJs.aspx.cs" Inherits="WebApplication1.UI.FileUploadByJs" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xht

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

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

asp.net core 通过ajax上传图片及wangEditor图片上传

asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端代码如下: @Html.AntiForgeryToken() @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <div> <form id="uploadForm">

ajax+spring文件上传

1.js代码 $(function(){ $('#upfileID').change(function(){ $.ajaxFileUpload({ url: '/upload/image', type: 'post', secureuri: false, //一般设置为false fileElementId: 'upfileID', // 上传文件的id属性名 dataType: 'text', //返回值类型,一般设置为json.application/json success: functi

上传图片/文件到服务器

package yao.camera.util; import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import android.gr

JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop)

原文:JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop) 源代码下载地址:http://www.zuidaima.com/share/1550463770102784.htm sevlet写的demo,可直接运行.   

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax) 方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单 方式四:使用jquery.from.js,支持提交同时

7 款基于 JavaScript/AJAX 的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby on Rails.Java.Node.js.Go等)一起使用,支持标准的HTML表单文件上传. 2.  Pixelco

基于jsp的AJAX多文件上传的实现

最近的项目开发中,遇到了一个多文件上传的问题,即在不刷新页面的情况下,上传多个文件至服务器.现总结分享如下: 本文主要采用了基于jsp的ajax,jquery,servlet等技术. 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理.注意在文件上载时,所使用的编码类型应当是"multipart/form-data",它既可以发送文本数据,也支持二进制数据上载. <%@ page language="