首页 新闻 会员 周边

ajax mvc 异步上传

0
悬赏园豆:10 [已解决问题] 解决于 2016-02-20 10:22

怎么利用ajax,在mvc中异步上传文件啊

凤城沙子的主页 凤城沙子 | 初学一级 | 园豆:112
提问于:2015-12-28 17:14
< >
分享
最佳答案
0

ajaxfileupload.js,我们MVC项目上传都是用的这个。

 function ajaxFileUpload() {
     $.ajaxFileUpload
        (
            {
                url: '/Controllers名/Upload?action=up', //用于文件上传的服务器端请求地址up参数标记此次是上传操作还是裁剪操作
                secureuri: false, //一般设置为false,是否安全上传
                fileElementId: 'HotfileImg', //文件上传控件的id属性  <input type="file" id="file" name="file" />
                dataType: 'json', //返回值类型 一般设置为json 期望服务器传回的数据类型
                success: function (data, status)  //服务器成功响应处理函数
                {
                   //成功。
                  },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
收获园豆:10
W宁宁 | 小虾三级 |园豆:522 | 2015-12-29 13:53

我试过了,不行

凤城沙子 | 园豆:112 (初学一级) | 2015-12-29 13:55

@itwwg: 唉?

W宁宁 | 园豆:522 (小虾三级) | 2015-12-29 13:57

@W宁宁: 这个我用过,不错,不行是不会玩吧

清风君 | 园豆:372 (菜鸟二级) | 2016-01-18 17:07

@清风君: 嘻嘻,我觉得也蛮好用的

W宁宁 | 园豆:522 (小虾三级) | 2016-01-19 10:06
其他回答(3)
0

你用jquery的一个插件jquery.upload.js ,

聆听的风声 | 园豆:137 (初学一级) | 2015-12-28 19:04

不行啊

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2015-12-29 13:55

@itwwg: 那里面有案例,只根据自己的需要改改代码就可以了

  

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 12:47
0

51CTO下载-jquery.jUploader-v1.01

猿进化 | 园豆:174 (初学一级) | 2015-12-28 19:19

我下载了一个,,然后又建立了一个项目都给拿过去根本用不了啊。。只能在源下载的才能用

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2016-01-04 11:30

@itwwg: 

 $.jUploader.setDefaults({             cancelable: true,             allowedExtensions: ['jpg', 'png', 'gif'],             messages: {                 upload: '上传',                 cancel: '取消',                 emptyFile: "{file} 为空,请选择一个文件.",                 invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",                 onLeave: "文件正在上传,如果你现在离开,上传将会被取消。"             }         });

                         $.jUploader({                 button: 'upload-button1', // 这里设置按钮id                 action: '/Blog/UploadImage', // 这里设置上传处理接口,这个加了参数test_cancel=1来测试取消

                // 上传完成事件                 onComplete: function (fileName, response) {                     // response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }                     if (response.success) {                         $('#photo1').attr('src', response.fileUrl);                         $("#HeaderImage").val(response.fileUrl);                         // 这里说明一下,一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl),方便提交到服务器保存                     } else {                         alert('上传失败');                     }                 }             });       

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 12:42

@itwwg:

 public ActionResult UploadImage()         {             bool success = false;          

            if (Request.Files.Count > 0)             {

                string ext = System.IO.Path.GetExtension(Request.Files[0].FileName).ToLower();                 if (ext == ".jpg" || ext == ".gif" || ext == ".png" && Request.Files[0].ContentLength <= 512 * 1024 * 1024)                 {

                    success = true;                     string fileName = Guid.NewGuid().ToString("N") + ext;

                    Request.Files[0].SaveAs(Server.MapPath("~/Content/newImg/Headers") + fileName);

                    var result= new {success=true,fileUrl="/Content/newImg/Headers/" + fileName };                     return Json(result);                 }             }                                     var temp = new { success=false, fileUrl=""};             return Json(temp);         }

  

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 12:43

@猿进化: $.jUploader,,新建一个项目,这个方法都点不出来,原包都引用进去了,,

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2016-01-04 13:07

@itwwg: 应用的是jquery.jUploader-1.01.js

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 13:17

@猿进化: 你知道怎么传文件么?我把我下的这个包发给你

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 13:18

@猿进化: 我下载了那个版本的,,还是不行啊,,

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2016-01-04 15:48

你的qq是多少

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2016-01-04 15:49

@itwwg: 1693275311

支持(0) 反对(0) 猿进化 | 园豆:174 (初学一级) | 2016-01-04 15:52
0

使用jquery.form.js框架,实例利用如下方式进行上传:

HTML代码:

<form action="<%=basePath %>user/fileupload.action" enctype="multipart/form-data" method="post" id="userPhotoUploadForm">
<input type="file" id="userPhotoFile" name="imgFile" style="display: none;"/>
</form>

 

js代码:

var options = {
url: basePath + 'user/fileupload.action',
type: 'post',
dataType: 'json',
data: $("#" + formid).serialize(),
success: function (data) {

console.log(data);
$("#memberPhoto").attr("src",basePath + data.url);
$("#userPhoto").attr("value", data.url);
}
};
$("#" + formid).ajaxSubmit(options);

 

通过以上方式便可以实现文件的异步上传功能

博观约取,厚积薄发 | 园豆:184 (初学一级) | 2015-12-30 09:08

你这个还是要提交一个form啊,那么form里面还有其他的数据呢,。一起提交怎么办呢

支持(0) 反对(0) 凤城沙子 | 园豆:112 (初学一级) | 2016-01-04 09:42

@itwwg: 序列化表单后,表单中的所有元素的值都给提交了,你在后台相应的处理不就可以了吗?

清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册