extjsajax上传文件
A. extjs ajax 可以上传文件吗
文件上传的Ajax，首先Ajax并不支持流的传输，只是在里面套了个iframe。
//ajax上传
Ext.get('btn').on('click',function(){
Ext.Ajax.request({
url:'Upload.php',
isUpload:true,
form:'upform',
success:function(){
Ext.Msg.alert('upfile','文件上传成功！');
}
});
});
<formid="upform">
请选择文件：<inputtype="file"name="imgFile"/>
<inputtype="button"id="btn"value="上传"/>
</form>
<?php
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上传文件的文件名
$type=$upfile["type"];//上传文件的类型
$size=$upfile["size"];//上传文件的大小
$tmp_name=$upfile["tmp_name"];//上传文件的临时存放路径
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$photo_tmp_file_name=//这里设置存放路径
move_uploaded_file($tmp_name,$photo_tmp_file_name);//存储文件
?>
B. extjs怎么使图片上传时显示预览
这个我做过，不难，思路给你
1.是当文本框内容发生改变的时候就将图片上传到服务器（如果图片小，用户是感觉不到你已经做了上传操作的。）
2.当服务器接受到这个图片的时候，将其放入到一个临时文件夹中并返回给前台一个图片路径（图片流也可以）。
3.Ajax请求会有一个相应，在服务器端成功接受到上传的图片后，返回给Ajax一个Reponse，这个Reponse里包含一个图片路径。
4.ExtJS在前台获取success里的responseText之后（也就是图片路径）将默认图片的src指向从后台反馈回来的图片路径。
现在图片就会现实出来
流程是：
用户选择图片-->
触发文本框改变事件--->
在事件中通过AJAX将图片上传给服务器--->
服务器将图片名称修改为UUID以免重复，并将此图片的路径返回给前台--->
前台AJAX请求的回调函数中获取responseText，也就是图片路径--->
设置默认图片的src为responseText---->
用户重新选择的时候（例如用户不喜欢这张图）--->
在文本框改变事件中通过AJAX将图片上传（包括先前上传的图片名称）--->
后台根据参数先删除临时图片--->
重复以上的步骤直到用户确定
需要注意的问题：
1.当用户改变了图片之后，需要把上一次的临时图片文件删除掉，以免出现垃圾图片过多。
2.每次上传图片的时候要在后面跟上一个随机参数（因为如果请求路径和参数相同，浏览器不会再继续发送请求）。通常情况下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()
3.图片太大的话，效果不是很好。
4.当用户点击确定后，将临时文件里的图片放置到你的正式图片存放目录下即可。
5.图片上传到后台使用UUID改名字，否则可能有重复
C. 我想用extjs实现上传和下载
给你上传代码，下载在服务端实现
重点是 xtype: 'filefield',
*************************************************************************
*上传框组件
*
************************************************************************
*/
Ext.define('Mocoolka.web.coreview.container.MKUploadForm', {
extend:'Ext.form.Panel',
frame: true,
autoScroll: true,
initComponent: function () {
var me = this;
me.title = getUIWithID("SystemUI.Buttons.Upload.Description");//'上传',
me.items = [
{
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'选择一个文件',
name: 'filename',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},
];
me.buttons = [{
text: getUIWithID("SystemUI.Buttons.Upload.Description"),//'上传',
handler: function () {
var form = this.up('form').getForm();
var action = this.up('form').mkaction;
var myaction = "import";
if (action.get("Name") == "ImportAttachment")
myaction = "ImportAttachment";
var url = mkruntimer.getDataManager().getUrlPath(myaction, action);
if (form.isValid()) {
form.submit({
url: url,
waitMsg: getUIWithID("SystemUI.Buttons.Uploading.Description"),//'上传中...',
success: function (fp, o) {
var form1 = form.owner;
form1.mkcallout(form1.mkcalloutpara, action.result.children);
form1.up('window').close();
},
failure: function (form, action) {
mkerrorutil.processAjaxFailure(action.response);
}
});
}
}
}, {
text: getUIWithID("SystemUI.Buttons.Reset.Description"),//'重设',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: getUIWithID("SystemUI.Buttons.Cancel.Description"),//'取消',
handler: function () {
this.up('window').close();
}
},
{
text: getUIWithID("SystemUI.MKUploadForm.AddFile.Description"),//'增加一个文件',
handler: function () {
this.up('form').addFile();
}
}
]
me.callParent(arguments);
},
addFile: function () {
var me = this;
me.add({
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'选择一个文件',
fieldLabel: getUIWithID(""),// '文件',
name: 'filename',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
});
},
//standardSubmit:false,
bodyPadding: '10 10 0',
flex:1,
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: 50
},
region: 'center',
});
D. php上传图片到服务器的前端和php代码
<?
require_once('../classfile/guid.class.php');
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上传文件的文件名
$type=$upfile["type"];//上传文件的类型
$size=$upfile["size"];//上传文件的大小
$tmp_name=$upfile["tmp_name"];//上传文件的临时存放路径
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$ext_file_name="";
switch($type){
case'image/pjpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/jpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/gif':
$okType=true;
$ext_file_name =".gif";
break;
case'image/png':
$okType=true;
$ext_file_name =".png";
break;
}
if(!$okType){
echojson_encode(array("success"=>false,'msg'=>"Notimage"));
return;
}
$web_root="D:".DIRECTORY_SEPARATOR."Easy2PHP5".DIRECTORY_SEPARATOR."webSiteJfz".DIRECTORY_SEPARATOR;
$photo_tmp_path=$web_root."img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp";
$temp_file_name=creat_guid(0).$ext_file_name;
$photo_tmp_file_name=$photo_tmp_path.DIRECTORY_SEPARATOR.$temp_file_name;
$photo_tmp_file_scr="img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp".DIRECTORY_SEPARATOR.$temp_file_name;
move_uploaded_file($tmp_name,$photo_tmp_file_name);
echojson_encode(array("success"=>true,'msg'=>"ok","file_name"=>$photo_tmp_file_name,"file_scr"=>$photo_tmp_file_scr));
//echojson_encode(array("success"=>false,'msg'=>json_encode($_FILES['imgFile'])));
return;
?>
guid.class.php//生成唯一的图片文件名
<?
functioncreat_guid($long){
$uuid="";
if(function_exists('com_create_guid')){
$uuid=com_create_guid();
}else{
mt_srand((double)microtime()*10000);//optionalforphp4.2.0anp.
$charid=strtoupper(md5(uniqid(rand(),true)));
$hyphen=chr(45);//"-"
$uuid=chr(123)//"{"
.substr($charid,0,8).$hyphen
.substr($charid,8,4).$hyphen
.substr($charid,12,4).$hyphen
.substr($charid,16,4).$hyphen
.substr($charid,20,12)
.chr(125);//"}"
//return$uuid;
}
if(!isset($long)||$long==0){
returnsubstr($uuid,1,strlen($uuid)-2);
}else{
return$uuid;
}
}