加拿大28

          <dfn id='2g1ih'><optgroup id='2g1ih'></optgroup></dfn><tfoot id='2g1ih'><bdo id='2g1ih'><div id='2g1ih'></div><i id='2g1ih'><dt id='2g1ih'></dt></i></bdo></tfoot>

          <ul id='2g1ih'></ul>

          • 您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
            ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
            当前位置:首页 >> 网页制作 >> web前端 >> MVC学习之七_____上传多张图片

            MVC学习之七_____上传多张图片

            来源:网络整理     时间:2018-09-24     关键词:

            本篇文章主要介绍了" MVC学习之七_____上传多张图片",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 后台代码: public ActionResult Index(){return View();}public ActionResult UpLoadProce...

            后台代码:
            public ActionResult Index()
                    {
                        return View();
                    }
            
                    public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
                    {
                        string filePathName = string.Empty;
                        // 获取图片存放的本地路径
                        string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
                        //说明没有拿到图片信息
                        if (Request.Files.Count == 0)
                        {
                            return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
                        }
            
                        //获取文件的扩展名
                        string ex = Path.GetExtension(file.FileName);
                        //重新给图片命名
                        filePathName = Guid.NewGuid().ToString("N") + ex;
                        //本地地址是否存在文件夹,如果不存在则创建
                        if (!System.IO.Directory.Exists(localPath))
                        {
                            System.IO.Directory.CreateDirectory(localPath);
                        }
                        //保存上传的图片信息
                        file.SaveAs(Path.Combine(localPath, filePathName));
            
                        return Json(new
                        {
                            jsonrpc = "2.0",
                            id = id,
                            filePath = "/Upload/" + filePathName
                        });
            
                    }
            

            模板代码:
            @{
                Layout = null;
            }
            
            <!DOCTYPE html>
            
            <html>
            <head>
                <meta name="viewport" c />
                <title>多图片上传页</title>
            
                <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
                <script type="text/javascript" src="~/Scripts/webuploader.js"></script>
                <link rel="stylesheet" href="~/Content/Upload/webuploader.css">
                <link rel="stylesheet" href="~/Content/bootstrap.min.css">
                <link rel="stylesheet" href="~/Content/Upload/demo.css">
                <link rel="stylesheet" href="~/Content/Upload/style.css">
                <link rel="stylesheet" href="~/Content/Upload/font-awesome.css">
            </head>
            <body>
                <div>
                    <table border="0">
                        <tr>
                            <td width="104">图片上传:</td>
                            <td colspan="3">
                                <div>
            
                                </div><!--存放图片的容器-->
                                <div></div>
                                <!--这是上传按钮-->
                            </td>
                        </tr>
                        <tr>
                            <td width="104"></td>
                            <td colspan="3">
                                <button>开始上传</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </body>
            </html>
            
            <script type="text/javascript">
            	var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../";
            	$(function() {
            		var $ = jQuery,
            			$list = $('#fileList'),
            			// 优化retina, 在retina下这个值是2
            			ratio = window.devicePixelRatio || 1,
            			// 缩略图大小
            			thumbnailWidth = 90 * ratio,
            			thumbnailHeight = 90 * ratio,
            
            			// Web Uploader实例
            			uploader;
            		uploader = WebUploader.create({
            			// 选完文件后,是否自动上传。
            			auto: false,
            
            			disableGlobalDnd: true,
            			// swf文件路径
            			swf: applicationPath + '/Script/Uploader.swf',
            
            			// 文件接收服务端。
                        server: applicationPath + '/Upload/UpLoadProcess',
            
            			// 选择文件的按钮。可选。
            			// 内部根据当前运行是创建,可能是input元素,也可能是flash.
            			pick: '#filePicker',
            
            			//只允许选择图片
            			accept: {
            				title: 'Images',
            				extensions: 'gif,jpg,jpeg,bmp,png',
            				mimeTypes: 'image/*'
            			}
            		});
            
            
            		// 当有文件添加进来的时候
            		uploader.on('fileQueued', function(file) {
            			var $li = $(
            					'<div + file.id + '">' +
            					'<img>' +
            					'<div></div></div>'
            				),
            				$img = $li.find('img');
            
            			// $list为容器jQuery实例
            			$list.append($li);
            
            			// 创建缩略图
            			// 如果为非图片文件,可以不用调用此方法。
            			// thumbnailWidth x thumbnailHeight 为 100 x 100
            			uploader.makeThumb(file, function(error, src) {
            				if(error) {
            					$img.replaceWith('<span>不能预览</span>');
            					return;
            				}
            
            				$img.attr('src', src);
            			}, thumbnailWidth, thumbnailHeight);
            		});
            
            		// 文件上传过程中创建进度条实时显示。
            		uploader.on('uploadProgress', function(file, percentage) {
            			var $li = $('#' + file.id),
            				$percent = $li.find('.progress span');
            
            			// 避免重复创建
            			if(!$percent.length) {
            				$percent = $('<p><span></span></p>')
            					.appendTo($li)
            					.find('span');
            			}
            
            			$percent.css('width', percentage * 100 + '%');
            		});
            
            		// 文件上传成功,给item添加成功class, 用样式标记上传成功。
            		uploader.on('uploadSuccess', function(file, response) {
            
                        $('#' + file.id).addClass('upload-state-done');
                        //alert("保存成功");   
            		});
            
            		// 文件上传失败,显示上传出错。
            		uploader.on('uploadError', function(file) {
            			var $li = $('#' + file.id),
            				$error = $li.find('div.error');
            
            			// 避免重复创建
            			if(!$error.length) {
            				$error = $('<div></div>').appendTo($li);
            			}
            
            			$error.text('上传失败');
            		});
            
            		// 完成上传完了,成功或者失败,先删除进度条。
            		uploader.on('uploadComplete', function(file) {
            			$('#' + file.id).find('.progress').remove();
            		});
            
            		//所有文件上传完毕
            		uploader.on("uploadFinished", function() {
            			//提交表单
            
            		});
            
            		//开始上传
            		$("#ctlBtn").click(function() {
                        uploader.upload();
            		});
            
            		//显示删除按钮
            		$(".cp_img").live("mouseover", function() {
            			$(this).children(".cp_img_jian").css('display', 'block');
            
            		});
            		//隐藏删除按钮
            		$(".cp_img").live("mouseout", function() {
            			$(this).children(".cp_img_jian").css('display', 'none');
            
                    });
            
            		//执行删除方法
            		$list.on("click", ".cp_img_jian", function() {
            			var Id = $(this).parent().attr("id");
            			uploader.removeFile(uploader.getFile(Id, true));
            			$(this).parent().remove();
            		});
            
            	});
            </script>
            
            

            此外还用到了模板中引用的css和js代码,详见附件
            备注:css中关于图片的引用请根据自己的路径,修改图片地址
            参考:http://www.cnblogs.com/ismars/p/4176912.html
            稍有改动,如果对此控件有兴趣可到官方了解

            以上就介绍了 MVC学习之七_____上传多张图片,包括了方面的内容,希望对web前端有兴趣的朋友有所帮助。

            本文网址链接:http://bayitaku.com/article/detail_4589945.html

            相关图片

            相关文章