Jquery_异步上传文件多种方式归纳

1.不用任何插件，利用iframe，将form的taget设为iframe的name，注意设为iframe的id是没用的，跟网上很多说的不太一致

iframe_upload.htm<!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"> <head> <title></title> </head> <body> <form id="form1"method="post"action="Upload.aspx"enctype="multipart/form-data"target="uploadframe"> <input type="file"id="upload"name="upload" /> <input type="submit"value="Upload" /> </form> <iframe id="uploadframe"name="uploadframe"style="visibility:hidden"></iframe> </body> </html>

Upload.aspx<%@ Page Language="C#" %>
<%Response.ClearContent();try{ if (Request.Files.Count == 0) Response.Write("Error"); else{ HttpPostedFile file= Request.Files[0]; string ext =System.IO.Path.GetExtension(file.FileName); string folder = HttpContext.Current.Server.MapPath("~\\Upload\\"); string path = folder + Guid.NewGuid().ToString() +ext; file.SaveAs(path); Response.Write("Success"); } } catch{ Response.Write("Error"); } %>

2.利用ajaxupload.js

Default.aspx<!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"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>Ajax Upload Demo</title> <script type="text/javascript"src="Scirpt/jquery-1.10.2.min.js"></script> <script type="text/javascript"src="Scirpt/ajaxupload.js"></script> <script type="text/javascript">$(function() { //创建一个上传参数 varuploadOption ={ //提交目标 action: "Upload.aspx", //自动提交 autoSubmit: false, //选择文件之后… onChange: function(file, extension) { if(newRegExp(/(jpg)|(jpeg)|(bmp)|(gif)|(png)/i).test(extension)) { $("#filepath").val(file); } else{ alert("只限上传图片文件，请重新选择！"); } }, //开始上传文件 onSubmit: function(file, extension) { $("#state").val("正在上传" +file + ".."); }, //上传完成之后 onComplete: function(file, response) { if(response == "Success") $("#state").val("上传完成！"); else$("#state").val(response); } } //初始化图片上传框 varoAjaxUpload = newAjaxUpload('#selector', uploadOption); //给上传按钮增加上传动作 $("#up").click(function() { oAjaxUpload.submit(); }); }); </script> </head> <body> <div> <label>一个普通的按钮：</label><input type="button"value="选取图片"id="selector" /> <br /> <label>选择的图片路径：</label><input type="text"readonly="readonly"value=""id="filepath" /> <br /> <label>不是submit按钮：</label><input type="button"value="上传"id="up" /> <br /> <label>上传状态和结果：</label><input type="text"readonly="readonly"value=""id="state" /> </div> </

转载于:https://www.cnblogs.com/MarchThree/p/3866761.html

Jquery_异步上传文件多种方式归纳相关推荐

jQuery异步上传文件
jQuery异步上传文件我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="fil ...
jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能,选择它因为它的配置 ...
php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白这个跨域异步上传功能我们借助了Jquery.for ...
html中异步上传文件实现示例,HTML_html中异步上传文件实现示例，复制代码代码如下: form actio - phpStudy...
html中异步上传文件实现示例复制代码代码如下: 复制代码代码如下: 这是html中最常见最简单的表单提交方式,但是这种方式必须会切换页面,也许有些时候我们希望可以在同一个页面与服务器进行交互,并不 ...
华为服务器上传文件,服务器上传文件的方式
服务器上传文件的方式内容精选换一换外部镜像文件在从原平台导出前,没有按照"Windows操作系统的镜像文件限制"的要求完成初始化操作,推荐您使用弹性云服务器完成相关配置.流程 ...
如何使用 jQuery 异步上传文件？
问: 我想用 jQuery 异步上传文件. $(document).ready(function () { $("#uploadbutton").click(function () ...
Python联调七牛云异步上传文件
注:本篇文章参考文献乾坤大挪移,如何将同步阻塞(sync)三方库包转换为异步非阻塞(async)模式?Python3.10实现.-刘悦. 首先需要拥有一个七牛云的账号七牛云官网:七牛云 | 一站式 ...
java获取ajax上传的文件,Java使用Ajax异步上传文件
相关代码示例: html代码片段: 名称 class="layui-input"> 描述文件请选择配置文件立即提交重置 js代码片段: //上传配置文件 $(&quo ...
input[type=file] 异步上传文件
背景 UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片. 拍照上传部分的代码如下 html部分 <div class="take-photo"& ...

Jquery_异步上传文件多种方式归纳

Jquery_异步上传文件多种方式归纳相关推荐

最新文章

热门文章