jq异步上传
1. 用jquery如何实现提交表单点击提交之后显示正在上传中，之后显示上传成功的效果
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
2. WCF 中怎么使用 jquery 异步上传多个文件
在服务器端 InputStream 返回的是一个数组，也就是运行前端提交多个file元素
如果WCF 无法截获 InputStream，你可以在前端将文件 转换Base64 字符串 做为参数 提交，服务端接收到再将字符串转换成文件
3. yii2高级框架怎么使用jquery file upload上传插件
// 视图文件
use kartik\file\FileInput;
<?php $form = ActiveForm::begin([
'options' => ['enctype'=>'multipart/form-data'],
]); ?>
<?php
echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [
'options' => ['multiple' => true],
'pluginOptions' => [
// 需要预览的文件格式
'previewFileType' => 'image',
// 预览的文件
'initialPreview' => ['图片1', '图片2', '图片3'],
// 需要展示的图片设置，比如图片的宽度等
'initialPreviewConfig' => ['width' => '120px'],
// 是否展示预览图
'initialPreviewAsData' => true,
// 异步上传的接口地址设置
'uploadUrl' => Url::toRoute(['/goods/async-image']),
// 异步上传需要携带的其他参数，比如商品id等
'uploadExtraData' => [
'goods_id' => $id,
],
'uploadAsync' => true,
// 最少上传的文件个数限制
'minFileCount' => 1,
// 最多上传的文件个数限制
'maxFileCount' => 10,
// 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
'showRemove' => true,
// 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
'showUpload' => true,
//是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
'showBrowse' => true,
// 展示图片区域是否可点击选择多文件
'browseOnZoneClick' => true,
// 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
'fileActionSettings' => [
// 设置具体图片的查看属性为false,默认为true
'showZoom' => false,
// 设置具体图片的上传属性为true,默认为true
'showUpload' => true,
// 设置具体图片的移除属性为true,默认为true
'showRemove' => true,
],
],
// 一些事件行为
'pluginEvents' => [
// 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
"fileuploaded" => "function (event, data, id, index) {
console.log(data);
}",
],
]);
?>
<?php ActiveForm::end(); ?>
如上所述，基本上都是组件 FileInput的基本属性和设置，我们这里也仅仅罗列了一些常用的属性介绍，如有所需，可查看文档看属性的详细说明。
按照如上所配置，我们预览下效果图
感觉上效果很是可以，在开始写php代码实现之前，我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
假设上面的视图文件是用户展示商品图片的详情页，当前controller是指渲染视图文件的controller，则需要在controller中获取商品关联的图片，用于展示或者说用于商品图片的删除\新增操作。
// 假设商品的图片是 $relationBanners,$id是商品的id
// $relationBanners的数据结构如：
/**
* Array
*(
* [0] => Array
* (
* [id] => 1484314
* [goods_id] => 1173376
* [banner_url] => ./uploads/20160617/146612713857635322241f2.png
* )
*
*)
*/
$relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all();
// 对商品banner图进行处理
$p1 = $p2 = [];
if ($relationBanners) {
foreach ($relationBanners as $k => $v) {
$p1[$k] = $v['banner_url'];
$p2[$k] = [
'url' => Url::toRoute('/banner/delete'),
'key' => $v['id'],
];
}
}
$model = new Banner;
return $this->render('banner', [
'model' => $model,
'p1' => $p1,
'p2' => $p2,
'id' => $id
]);
你可以看到p1是图片地址的集合，这里用于赋值给initialPreview
p2是一组url和key的集合，这里用于赋值给initialPreviewConfig
其中url是移除图片的请求地址
key是每个图片对应的id
此时我们视图文件中的pluginOptions应该是这样的
'pluginOptions' => [
// other code
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
// other code
],
注意设置initialPreviewAsData为true哦，不然等会创建图片后，预览图不会显示。
我们在一开始配置文件中配置了uploadUrl，该参数是异步上传的图片地址。
现在看上传界面应该是光秃秃的，我们选择一张图片后效果如上图2所示，
需要提醒的是，每张小图片上的上传是上传对应的小图片，input框（右下角）的上传和移除都是针对所有的图片的操作，一张也是上传，十张也是上传，我们这里只对多图上传的操作做一个必要的说明。
图片上传的地址以及上传需要的额外参数（如商品id）我们都准备好了，额外的参数配置项是uploadExtraData，具体见上面视图文件中的配置。
接着我们看 /goods/async-image 异步上传的程序实现
public function actionAsyncImage ()
{
// 商品ID
$id = Yii::$app->request->post('goods_id');
$p1 = $p2 = [];
if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) {
echo '{}';
return;
}
for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) {
$url = '/banner/delete';
$imageUrl = ''; //调用图片接口上传后返回图片地址
// 图片入库操作，此处不可以批量直接入库，因为后面我们还要把key返回 便于图片的删除
$model = new Banner;
$model->goods_id = $id;
$model->banner_url = $imageUrl;
$key = 0;
if ($model->save(false)) {
$key = $model->id;
}
// $pathinfo = pathinfo($imageUrl);
// $caption = $pathinfo['basename'];
// $size = $_FILES['Banner']['size']['banner_url'][$i];
$p1[$i] = $imageUrl;
$p2[$i] = ['url' => $url, 'key' => $key];
}
echo json_encode([
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
'append' => true,
]);
return;
}
到此，单图和多图上传的工作我们也就完成了。
为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。
按照我们的配置，现在的预览图应该是这样的。
不说废话，我们看图片删除的程序（/banner/delete）实现
public function actionDelete ()
{
if ($id = Yii::$app->request->post('key')) {
$model = $this->findModel($id);
$model->delete();
}
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['success' => true];
}
4. 求帮忙写一个异步上传文件的程序，JQ要求使用post传值方式
可以使用 jquery.form.js, 详细使用方法可以网络.
5. jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
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;
}
}
6. 关于jQuery的文件大小
1.jquery库文件一般情况下是不会影响到网速的，现在的最新版本v1.6.4，是90K左右，即便这个大小，对现在的用户而言，也都是可以接受的。
2.网速变慢的原因往往不是js的大小，而js运行所需要的时间。比如现在一些网站用到了googlemap，那么就要等到google map完全加载完才能看到整个网页。
3.浏览器会有缓存，当第一次加载完类库后，就会存在缓存中，当再次访问这个类库时，就不会再次下载，而是直接使用了。
所以放心的使用吧！