jqajax文件上传

㈠ javascript js ajax 麻烦各位帮忙设计一个图片上传的系统，最好有详细的代码。

具体思路是，上传图片时，放入临时目录，上传完成后，对图片生成uuid，重命名并已入图版片文件权夹，在数据库中记录uuid与商品id的对应关系。

插件的问题，jquery-file-upload我没用过，不过看了github上的文档，感觉说得蛮详细的。后端的也有涉及。node的部分使用express的中间件jquery-file-upload-middleware，你在github上搜这个吧，有很详细的前后端的示例代码。

如果你想要用原生的也很简单。利用html5的上传接口，或者使用iframe做个隐藏表单就行了。后端node部分，就是解析req的body部分，并且把他们写入文件。因为是数据流，可以使用更快地流写入方式。

㈡ on绑定的change去触发formData上传文件

首先，jq 是change事件，onchange是js的 其次，change事件是当你上传文件改变时触发，也就是 value 值改变时触发

㈢ 当点击带+的图片时，弹出手机相册，可以选择手机相册内的图片上传，代码如何写怎么实现

首先需要引用 js 和css

<!--上传控件-->
2<scriptsrc="query.form.min.js"></script>
3<linkhref="Img_List.css"rel="stylesheet"/>
4<scriptsrc="Img_List.js"></script>

Img_List.js 如下：

///<referencepath="../../script/jquery-1.8.0.min.js"/>
//显示
functionimgshow(obj){
//$(obj).find("a").show();
}

//隐藏
functionimghide(obj){
//$(obj).find("a").hide();
}

//上传
functionupload(){
$("#FileLoad").click();
}

//删除
functionimgdel(listId,FileId,hfId){

$.post("/CommonMole/ashx/public.ashx?action=DelMessageImg&Files="+$("#"+hfId).val(),function(result){
if(result!="ok")
$.messager.alert("消息提示","删除失败!");
});
varhtml="<li><imgsrc="/Themes/Images/jia.jpg"style="height:80px;width:80px;"/><inputtype="file"id=""+FileId+""class="input"onchange="ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');"name=""+FileId+""/></li>"
$("#"+listId).html(html);
}

//添加成功
functionimgaddhtml(data,code,listId,fileId,hfId){
varlist=data.split(',');
varhtml="<lionmouseover="imgshow(this)"onmouseout="imghide(this);">";
html+="<astyle="height:80px;width:80px;"href=""+list[0]+""target="_blank"><imgsrc=""+list[0]+""imgs=""+list[0]+""code=""+code+""/></a><spanonclick="imgdel('"+listId+"','"+fileId+"','"+hfId+"')"></span></li>";
$("#"+listId).html(html);
}

//图片文件上传
//uppath上传空间id
//上传成功存放的图片路径的隐藏域id
//listId显示图片的区域id
functionImgUpload(uppath,hndimg,listId){
varsendUrl="/CommonMole/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath="+uppath;
//开始提交
$("#form1").ajaxSubmit({
beforeSubmit:function(formData,jqForm,options){
//alert(1);
},
success:function(data,textStatus){
varlist=$("#"+hndimg).val();
$("#"+hndimg).val(data.msgbox);
imgaddhtml(data.msgbox,0,listId,uppath,hndimg);
},
error:function(data,status,e){
alert("上传失败！");
},
url:sendUrl,
type:"post",
dataType:"json",
timeout:600000
});
};
Img_List.css如下：
.img_list{margin:0px;padding:0px;overflow:hidden;}
.img_listul,.img_listulli{margin:0px;padding:0px;}
.img_listulli{float:left;list-style:none;position:relative;margin:5px0px0px5px;}
.img_listullispan
{position:absolute;top:3px;right:3px;width:16px;height:16px;opacity:0.6;filter:alpha(opacity=60);margin:0002px;
vertical-align:top;background:url('/Themes/Images/panel_tools.png')no-repeat-16px0px;}
.img_listulliimg{width:80px;height:80px;cursor:pointer;position:relative;z-index:0;}
.img_listulli.input{width:80px;height:80px;cursor:pointer;position:relative;left:-100px;vertical-align:top;margin:0px;padding:0px;opacity:0;filter:alpha(opacity=0);}

panel_tools.png 如下：

#region上传单文件处理===================================
46privatevoidSingleFile(HttpContextcontext)
47{
48
49string_refilepath=context.Request.QueryString["ReFilePath"];//取得返回的对象名称
50string_upfilepath=context.Request.QueryString["UpFilePath"];//取得上传的对象名称
51string_delfile=context.Request.QueryString[_refilepath];
52HttpPostedFile_upfile=null;
53try
54{
55_upfile=context.Request.Files[_upfilepath];
56}
57catch(Exceptione)
58{
59context.Response.Write("{"msg":"0","msgbox":"上传文件过大！"}");
60context.Response.End();
61}
62bool_iswater=false;//默认不打水印
63bool_isthumbnail=false;//默认不生成缩略图
64bool_isimage=false;
65
66if(context.Request.QueryString["IsWater"]=="1")
67_iswater=true;
68if(context.Request.QueryString["IsThumbnail"]=="1")
69_isthumbnail=true;
70if(context.Request.QueryString["IsImage"]=="1")
71_isimage=true;
72
73if(_upfile==null)
74{
75context.Response.Write("{"msg":"0","msgbox":"请选择要上传文件！"}");
76return;
77}
78UpLoapFiles=newUpLoad();
79stringmsg=upFiles.fileSaveAs(_upfile,_isthumbnail,_iswater,_isimage);
80//删除已存在的旧文件
81Utils.DeleteUpFile(_delfile);
82//返回成功信息
83context.Response.Write(msg);
84
85context.Response.End();
86}
87#endregion

101publicstringfileSaveAs(HttpPostedFilepostedFile,boolisThumbnail,boolisWater,bool_isImage,bool_isReOriginal)
102{
103try
104{
105stringfileExt=Utils.GetFileExt(postedFile.FileName);//文件扩展名，不含“.”
106stringoriginalFileName=postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"")+1);//取得文件原名
107stringfileName=Utils.GetRamCode()+"."+fileExt;//随机文件名
108stringdirPath=GetUpLoadPath();//上传目录相对路径
109
110//检查文件扩展名是否合法
111if(!CheckFileExt(fileExt))
112{
113return"{"msg":"0","msgbox":"不允许上传"+fileExt+"类型的文件！"}";
114}
115//检查是否必须上传图片
116if(_isImage&&!IsImage(fileExt))
117{
118return"{"msg":"0","msgbox":"对不起，仅允许上传图片文件！"}";
119}
120//检查文件大小是否合法
121if(!CheckFileSize(fileExt,postedFile.ContentLength))
122{
123return"{"msg":"0","msgbox":"文件超过限制的大小啦！"}";
124}
125//获得要保存的文件路径
126stringserverFileName=dirPath+fileName;
=dirPath+"small_"+fileName;
128stringreturnFileName=serverFileName;
129//物理完整路径
130stringtoFileFullPath=Utils.GetMapPath(dirPath);
131//检查有该路径是否就创建
132if(!Directory.Exists(toFileFullPath))
133{
134Directory.CreateDirectory(toFileFullPath);
135}
136//保存文件
137postedFile.SaveAs(toFileFullPath+fileName);
138//如果是图片，检查图片尺寸是否超出限制
139if(IsImage(fileExt))
140{
141Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+fileName,3000,3000);
142}
143//是否生成缩略图
144if(IsImage(fileExt)&&isThumbnail)
145{
146Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+"small_"+fileName,150,150,"R");
147//returnFileName+=","+serverThumbnailFileName;//返回缩略图，以逗号分隔开
148}
149
166/
171return"{"msg":"1","msgbox":""+returnFileName+""}";
172}
173catch
174{
175return"{"msg":"0","msgbox":"上传过程中发生意外错误！"}";
176}
177}

㈣ javascript ajaxsubmit提交 提示下载信息

这个是我网络找的，很适合你哦。这种问题多用Google哦，配合关键字搜索很容易搜到想要的。

今天在使用jquery.form插件的ajaxSubmit上传文件时，在IE、chorme下测试，老是出现下载文件的提示框，谷歌网络了半天，基本没有人说明是什么原因的，在查看了jquery.form的源码时，发现了下面的代码：

if (options.iframe !== false && (options.iframe || shouldUseFrame)) {
if (options.closeKeepAlive) {
$.get(options.closeKeepAlive, function() {
fileUploadIframe(a);
});
}
else {
fileUploadIframe(a);
}
}
else if ((hasFileInputs || multipart) && fileAPI) {
fileUploadXhr(a);
}
else {
$.ajax(options);
}

在ajaxSubmit提交表单的时候，如果表单内有文件上传的话，会判断参数是否配置的iframe为false参数，如果没有，会用创建隐藏iframe方式提交表单，如果设定了iframe为false，则判断浏览器是否支持HTML5的fileAPI，支持就直接使用XHR方式提交，否则就当作普通表单提交。

所以因为是用隐藏iframe提交的表单，如果服务器返回的是“application/json”类型的数据，IE和Chrome默认是下载文件的，因为内容是返回给了iframe，而不是ajaxSubmit的success方法。在iframe加载了返回结果后，ajaxSubmit的success方法是去读取iframe的内容来转换成json对象使用。
解决办法就是，在ajaxSubmit提交表单的配置里面，增加一个参数，服务器端判断是否是ajaxSubmit提交过来的表单，是的话就返回“text/html”类型的内容，不是就可以返回“application/json”的。
简单的说就是ajaxSubmit上传文件的话，返回的内容只能是网页内容的，否则IE就有可能出现下载提示框。

㈤ 使用PHP Yii2.0框架上传图片的时候出现下面错误

jq的版本问题，新版本jq取消了xhr.getResponseHeader 这个方法。可以修改jq的版本，或者手动添加xhr.getResponseHeader 方法到jq文件去

㈥ 求帮忙写一个异步上传文件的程序，JQ要求使用post传值方式

这个文件是jQuery的Ajax文件上传的组件，先引入jq再引入这个文件。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">

var name=$("#name").val();
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'目标文件',
secureuri:false,
fileElementId:'img',

data:name,
type:'POST',

success: function (end) //end为返回值
{
// 返回处理
}
}
)

return false;
}
</script>

<input id="img" type="file" size="45" name="img" class="input">

<input id="name" type="text" size="45" name="name" class="input">

<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

后台可以用$_FILES接收文件信息，$_POST['name']接收文件名，与普通提交文件处理流程一致。