当前位置:首页 » 文件传输 » 如何异步上传文件
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

如何异步上传文件

发布时间: 2022-12-26 10:09:03

‘壹’ jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

<script type=text/javascript src=js/jquery.js</script <script type=text/javascript src=js/ajaxfileupload.js</script <!-- 执行上传文件操作的函数 -- <script type=text/javascript function ajaxFileUpload(){ $.ajaxFileUpload({url:'update.do?method=uploader', //需要链接到服务器地址 secureuri:false, fileElementId:'houseMaps', //文件选择框的id属性 dataType: 'xml', //服务器返回的格式,可以是json success: function (data, status) //相当于java中try语句块的用法{$('#result').html('添加成功');}, error: function (data, status, e) //相当于java中catch语句块的用法{$('#result').html('添加失败');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data <input type=file id=houseMaps name=houseMaps/ <input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html服务器代码: public class UpdateAction extends DispatchAction { public ActionForward uploader(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { UpFormForm upFormForm = (UpFormForm) form; FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream(); File file = new File(D:/ + ff.getFileName()); //指定文件存储的路径和文件名 OutputStream os = new FileOutputStream(file); byte[] b = new byte[1024]; int len = 0; while((len = is.read(b)) != -1){ os.write(b, 0, len);}os.close(); is.close(); } catch (Exception e) {

‘贰’ 上传excel文件读取内容可以异步吗

可以。ajaxfileupload.js插件可以实现Excel的异步上传,所以上传excel文件读取内容可以异步。MicrosoftExcel是Microsoft为使用Windows和AppleMacintosh操作系统的电脑编写的一款电子表格软件。

‘叁’ php 异步上传图片几种方法总结

代码如下
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe"> <!--上传图片页面 --> </form> <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能。
实例
代码如下
a.html <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST"> <input name="submit" id="submit" value="" type="hidden"> <label>上传文件: <input name="test_file" type="file" id="test_file" size="48"></label> <input type="image" value="立即上传" id="submit_btn"> </form><iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>
php代码:
代码如下
<?php
if ($_files["test_file"]["error"] > 0)
{
echo "Error: " . $_files["test_file"]["error"] . "<br />";
}
else
{
//这里的判断图片属性的方法就不写了。自己扩展一下。
$filetype=strrchr($_files["test_file"]["name"],".");
$filetype=substr($filetype,1,strlen($filetype));
$filename="img/".time("YmdHis").".".$filetype;
move_uploaded_file($_files["test_file"]["tmp_name"],$filename);
echo '<script >alert(1)</script>';
$return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerhtml='".$dataimgpath."'";
echo "<script >alert('上传成功')</script>";
echo "<script>{$return}</script>";
}
?>
其实jquery ajax图片异步上传
html:
<!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" lang="en_US" xml:lang="en_US">
<head>
<title>图片异步上传</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</div>
<div id="msg">
</div>
</body>
</html>

index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});

function stopSend(str){
var im="<img src='upload/images/"+str+"'>";
$("#msg").append(im);
}

upload.php
<?php
$file=$_files['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend('$name')</script>";
?>

异步上传图片几种方法

‘肆’ 同步上传文件和异步上传文件

两者最大的区别就是:表单上传过程中,整个页面就刷新了;而异步上传就可以达到只刷新局部位置!
参考文章地址:[ https://www.cnblogs.com/fengxuehuanlin/p/5311648.html]

对上传文件的处理

注:表单提交中的 "button"按钮,不需要type类型,或者type="Submit"
[图片上传中...(-ac9a5e-1575880787952-0)]

2 同步上传
[ https://www.cnblogs.com/fengxuehuanlin/p/5311648.html]

‘伍’ Okhttp 使用(同步、异步/get、post/上传文件)

目前Android端调用网络请求最常用的框架就是OKHttp,目前项目中也经常会用到。OKHTTP有哪些特点呢?下面是官网给出的OKHTTP的特点:

官网地址: https://square.github.io/okhttp/
想要详细了解HTTP/2,可以参考: https://www.jianshu.com/p/828a29bced9f

接下来就可以愉快的开始使用OKhttp进行开发了。

OKhttpclient通过builder构建,构建的时候涉及到很多配置项,本次简单对其中一些配置项做了说明,后续会对一些重要的配置项做专题说明。在实际的项目中的配置项根据项目具体需求进行配置。

上述配置项中比较常用的有

同步get请求会阻塞当前线程直到返回结果,请求大致分为四个步骤:

异步请求方式的步骤和上述前两个步骤基本一致,主要发起请求的方式发生了变化,结果通过回调返回。这种请求方式对请求的线程没有限制。

与get请求方式不同的是post请求需要构建RequestBody,在请求时携带RequestBody。

‘陆’ Java中如何图片异步上传

在java中要实现异步上传要提前做好准备,对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。
这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,struts上传的功能就是基于这个实现的。
common-fileupload是依赖于common-io这个包的,所以还需要下载这个包。剩下的就是js文件的导入了,我导入了以下文件:
<script type="text/javascript" src="lib/Js/jquery.js"></script>
<script ltype="text/javascript" src="/js/ajaxfileupload.js"></script>

在页面中的写法:
div class="controls"><span class="btn green fileinput-button"><i class="icon-plus icon-white"></i>
<span>上传照片</span>
<input id="fileToUpload" name="myfiles" type="file" onchange="upload()" title="上传" /></span>
</div>function upload(){
$.ajaxFileUpload
(
{
url:'<%=basePath%>sysperson/uploadpic',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'text',
success: function (data, status)
{
document.all.mypic.src="<%=basePath%>uploads/" + data;
document.all.picpath.value = data;
}, error : function(data, status, e) {
alert(e);
}
});
}

‘柒’ 源生JS怎样实现文件异步上传

这次给大家带来源生JS怎样实现文件异步上传,源生JS实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下。
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title></title></head><body><label for="text">名称</label><input type="text" id="text" name="name"/><label for="file">文件</label><input type="file" id="file" name="file"/><button type="button" onclick="ajaxUploadFile()">确定</button></body><script type="text/javascript"> function ajaxUploadFile() { var formData = new FormData(); var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST","/data",true); xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); formData.append("name",document.getElementById("text").value); formData.append("file",document.getElementById("file").files[0]); xmlhttp.send(formData); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { console.log("上传成功"+xmlhttp.responseText); }else { console.log("上传失败"+xmlhttp.responseText); } } } }</script></html>
相信看了本文案例你已经掌握了方法

‘捌’ Java异步上传文件怎么做

采用ajax上传(struts或jspsmart),下面提供一个思路
1\在jsp页面上嵌入一个隐藏的IFrame;
2\把相应上传文件路径传到iframe里面的src的jsp页面进行提交;
3\提交执行相应的.do或jsp就OK;
试一下,这个问题也困扰我很久了,最近才想出来的一个解决方案,由于工作忙没有去实现.

‘玖’ jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

JSP页面中引入的script代码
<script>
function
ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性
<input
type="file"
id="imgfile"
name="file"
/>
dataType:
'json',//返回值类型
一般设置为json
success:
function
(data,
status)
//服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
if(typeof(data.error)
!=
'undefined')
{
if(data.error
!=
'')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error:
function
(data,
status,
e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return
false;
}
</script>
struts.xml配置文件中的配置方法:
<struts>
<package
name="struts2"
extends="json-default">
<action
name="AjaxImageUploadAction"
class="com.test.action.ImageUploadAction">
<result
type="json"
name="success">
<param
name="contentType">text/html</param>
</result>
<result
type="json"
name="error">
<param
name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上传处理的Action
ImageUploadAction.action
package
com.test.action;
import
java.io.File;
import
java.io.FileInputStream;
import
java.io.FileOutputStream;
import
java.util.Arrays;
import
org.apache.struts2.ServletActionContext;
import
com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public
class
ImageUploadAction
extends
ActionSupport
{
private
File
imgfile;
private
String
imgfileFileName;
private
String
imgfileFileContentType;
private
String
message
=
"你已成功上传文件";
public
File
getImgfile()
{
return
imgfile;
}
public
void
setImgfile(File
imgfile)
{
this.imgfile
=
imgfile;
}
public
String
getImgfileFileName()
{
return
imgfileFileName;
}
public
void
setImgfileFileName(String
imgfileFileName)
{
this.imgfileFileName
=
imgfileFileName;
}
public
String
getImgfileFileContentType()
{
return
imgfileFileContentType;
}
public
void
setImgfileFileContentType(String
imgfileFileContentType)
{
this.imgfileFileContentType
=
imgfileFileContentType;
}
public
String
getMessage()
{
return
message;
}
public
void
setMessage(String
message)
{
this.message
=
message;
}
@SuppressWarnings("deprecation")
public
String
execute()
throws
Exception
{
String
path
=
ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[]
imgTypes
=
new
String[]
{
"gif",
"jpg",
"jpeg",
"png","bmp"
};
try
{
File
f
=
this.getImgfile();
String
fileExt
=
this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".")
+
1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!";
return
ERROR;
}*/
/**
*
检测上传文件的扩展名是否合法
*
*/
if
(!Arrays.<String>
asList(imgTypes).contains(fileExt))
{
message="只能上传
gif,jpg,jpeg,png,bmp等格式的文件!";
return
ERROR;
}
FileInputStream
inputStream
=
new
FileInputStream(f);
FileOutputStream
outputStream
=
new
FileOutputStream(path
+
"/"+
this.getImgfileFileName());
byte[]
buf
=
new
byte[1024];
int
length
=
0;
while
((length
=
inputStream.read(buf))
!=
-1)
{
outputStream.write(buf,
0,
length);
}
inputStream.close();
outputStream.flush();
}
catch
(Exception
e)
{
e.printStackTrace();
message
=
"文件上传失败了!!!!";
}
return
SUCCESS;
}
}
转载,仅供参考。

‘拾’ 不要组件插件怎么异步上传文件,要求选择文件后直接上传(不点发送提

结合HTML5,

<formenctype="multipart/form-data">
<inputid="file"name="file"type="file"/>
<inputtype="button"value="Upload"/>
</form>
<progress></progress>
$('#file').change(function(){
varformData=newFormData($('form')[0]);
$.ajax({
url:'upload.php',//接收页面
type:'POST',
xhr:function(){//XHR事件
myXhr=$.ajaxSettings.xhr();
if(myXhr.upload){//检测是否有此方法属性
myXhr.upload.addEventListener('progress',progressHandlingFunction,false);//设置进度
}
returnmyXhr;
},
//Ajax事件
beforeSend:beforeSendHandler,
success:completeHandler,
error:errorHandler,
//Form数据
data:formData,
cache:false,
contentType:false,
processData:false
});
});