『壹』 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
});
});